Volodymyr Serbulenko vvv-sss

AI Workflow

Overview

Building high-quality React Native animations requires deep knowledge of animation principles, performance optimization, and React Native Reanimated patterns. While AI assistance is powerful, vibecoding cannot be ignored—having balanced context and workflow can significantly speed up the development process. This repository is designed to be an active AI-friendly environment where developers can create, experiment, and play with animations. Every effort has been made to structure the codebase, provide comprehensive context, and maintain consistent patterns that make it suitable for AI-assisted development. The goal is to create a React Native animation laboratory where developers can explore animation techniques with all related data and context readily available.

Animation File Detection System

Each animation in this repository is wrapped by a unique slug identifier. This slug-based system simplifies detecting all files related to a specific animation, which is a core req

Quick Start

Getting started with Make it Animated is easy. Follow these steps to run the project locally:

# Clone the repository (default branch is 'public')
git clone https://github.com/make-it-animated/rn-makeitanimated.git

# Change to rn-makeitanimated directory
cd rn-makeitanimated

	import { SharedValue, useSharedValue } from "react-native-reanimated";
	import { ReanimatedScrollEvent } from "react-native-reanimated/lib/typescript/hook/commonTypes";

	export type ScrollDirection = "to-top" \| "to-bottom" \| "idle";
	export type ScrollDirectionValue = SharedValue<ScrollDirection>;

	// Tracks scroll direction changes for header animation logic
	export const useScrollDirection = (param?: "include-negative") => {
	const scrollDirection = useSharedValue<ScrollDirection>("idle");
	const prevOffsetY = useSharedValue(0); // Previous scroll position for direction comparison

	import React, { FC, useCallback, useEffect } from "react";

	import { LinearGradient } from "expo-linear-gradient";
	import { StyleSheet, useWindowDimensions, View, Text, ColorValue } from "react-native";

	import { ColorCircleOne } from "./color-circle-one";
	import { ColorCircleTwo } from "./color-circle-two";
	import { ColorCircleThree } from "./color-circle-three";
	import Animated, {
	FadeIn,

	{
	"name": "make-it-animated",
	"main": "expo-router/entry",
	"version": "2.1.0",
	"scripts": {
	"dev": "expo start -c",
	"ios": "expo run:ios --device",
	"android": "expo run:android --device"
	},
	"jest": {