= ({\n text,\n durationInFrames = 60,\n startFrame = 0,\n delayPerLetter = 2,\n animation = 'fade',\n easing = Easing.easeOutCubic,\n style,\n letterStyle,\n}) => {\n const frame = useCurrentFrame();\n\n return (\n \n {text.split('').map((char, index) => {\n const letterStart = startFrame + index * delayPerLetter;\n const progress = interpolate(\n frame,\n [letterStart, letterStart + durationInFrames / text.length],\n [0, 1],\n { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing }\n );\n\n let transform = '';\n let opacity = progress;\n\n switch (animation) {\n case 'scale':\n transform = `scale(${progress})`;\n break;\n case 'slide':\n transform = `translateY(${(1 - progress) * 30}px)`;\n break;\n case 'rotate':\n transform = `rotate(${(1 - progress) * 90}deg)`;\n break;\n case 'bounce':\n const bounce = progress < 0.5 ? progress * 2 : 2 - progress * 2;\n transform = `scale(${0.5 + bounce * 0.5})`;\n break;\n }\n\n return (\n \n {char === ' ' ? '\\u00A0' : char}\n \n );\n })}\n
\n );\n};\n\n// WordByWord - Animate text word by word\ninterface WordByWordProps {\n text: string;\n durationInFrames?: number;\n startFrame?: number;\n delayPerWord?: number;\n animation?: 'fade' | 'scale' | 'slide' | 'pop';\n style?: React.CSSProperties;\n wordStyle?: React.CSSProperties;\n}\n\nexport const WordByWord: React.FC = ({\n text,\n durationInFrames = 60,\n startFrame = 0,\n delayPerWord = 10,\n animation = 'fade',\n style,\n wordStyle,\n}) => {\n const frame = useCurrentFrame();\n const words = text.split(' ');\n\n return (\n \n {words.map((word, index) => {\n const wordStart = startFrame + index * delayPerWord;\n const progress = interpolate(\n frame,\n [wordStart, wordStart + 15],\n [0, 1],\n { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.easeOutBack }\n );\n\n let transform = '';\n\n switch (animation) {\n case 'scale':\n transform = `scale(${progress})`;\n break;\n case 'slide':\n transform = `translateY(${(1 - progress) * 20}px)`;\n break;\n case 'pop':\n const popScale = 1 + (1 - progress) * 0.3;\n transform = `scale(${progress < 0.5 ? progress * 2 * popScale : popScale - (progress - 0.5) * 2 * (popScale - 1)})`;\n break;\n }\n\n return (\n \n {word}\n \n );\n })}\n
\n );\n};\n\n// WaveText - Wave animation on text\ninterface WaveTextProps {\n text: string;\n amplitude?: number;\n frequency?: number;\n speed?: number;\n style?: React.CSSProperties;\n letterStyle?: React.CSSProperties;\n}\n\nexport const WaveText: React.FC = ({\n text,\n amplitude = 10,\n frequency = 0.3,\n speed = 0.15,\n style,\n letterStyle,\n}) => {\n const frame = useCurrentFrame();\n\n return (\n \n {text.split('').map((char, index) => {\n const offset = Math.sin(frame * speed + index * frequency) * amplitude;\n\n return (\n \n {char === ' ' ? '\\u00A0' : char}\n \n );\n })}\n
\n );\n};\n\n// RainbowText - Rainbow color cycling text\ninterface RainbowTextProps {\n text: string;\n speed?: number;\n saturation?: number;\n lightness?: number;\n style?: React.CSSProperties;\n letterStyle?: React.CSSProperties;\n}\n\nexport const RainbowText: React.FC = ({\n text,\n speed = 5,\n saturation = 70,\n lightness = 60,\n style,\n letterStyle,\n}) => {\n const frame = useCurrentFrame();\n\n return (\n \n {text.split('').map((char, index) => {\n const hue = (frame * speed + index * 20) % 360;\n const color = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n\n return (\n \n {char === ' ' ? '\\u00A0' : char}\n \n );\n })}\n
\n );\n};\n\n// GradientText - Animated gradient text\ninterface GradientTextProps {\n text: string;\n colors?: string[];\n speed?: number;\n angle?: number;\n style?: React.CSSProperties;\n}\n\nexport const GradientText: React.FC = ({\n text,\n colors = ['#10b981', '#34d399', '#6ee7b7', '#14b8a6', '#10b981'],\n speed = 2,\n angle = 90,\n style,\n}) => {\n const frame = useCurrentFrame();\n const offset = (frame * speed) % 100;\n\n const gradientStops = colors\n .map((color, i) => {\n const position = (i * 100 / (colors.length - 1) + offset) % 100;\n return `${color} ${position}%`;\n })\n .join(', ');\n\n return (\n \n {text}\n \n );\n};\n\n// Blur - Blur effect animation\ninterface BlurProps {\n children: React.ReactNode;\n from?: number;\n to?: number;\n durationInFrames?: number;\n startFrame?: number;\n style?: React.CSSProperties;\n}\n\nexport const Blur: React.FC = ({\n children,\n from = 20,\n to = 0,\n durationInFrames = 30,\n startFrame = 0,\n style,\n}) => {\n const frame = useCurrentFrame();\n\n const blur = interpolate(\n frame,\n [startFrame, startFrame + durationInFrames],\n [from, to],\n { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }\n );\n\n return (\n \n {children}\n
\n );\n};\n\n// Bounce - Bounce animation effect\ninterface BounceProps {\n children: React.ReactNode;\n height?: number;\n durationInFrames?: number;\n startFrame?: number;\n times?: number;\n damping?: number;\n style?: React.CSSProperties;\n}\n\nexport const Bounce: React.FC = ({\n children,\n height = 50,\n durationInFrames = 60,\n startFrame = 0,\n times = 3,\n damping = 0.7,\n style,\n}) => {\n const frame = useCurrentFrame();\n const { fps } = useVideoConfig();\n\n const progress = interpolate(\n frame,\n [startFrame, startFrame + durationInFrames],\n [0, 1],\n { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }\n );\n\n // Bounce formula with damping\n const bounceCount = times;\n const t = progress * bounceCount * Math.PI;\n const amplitude = height * Math.pow(damping, progress * bounceCount);\n const y = Math.abs(Math.sin(t)) * amplitude * (1 - progress);\n\n return (\n \n {children}\n
\n );\n};\n\n// Pulse - Pulse/scale breathing effect\ninterface PulseProps {\n children: React.ReactNode;\n minScale?: number;\n maxScale?: number;\n speed?: number;\n style?: React.CSSProperties;\n}\n\nexport const Pulse: React.FC = ({\n children,\n minScale = 0.95,\n maxScale = 1.05,\n speed = 0.1,\n style,\n}) => {\n const frame = useCurrentFrame();\n\n const scale = minScale + (maxScale - minScale) * (0.5 + Math.sin(frame * speed) * 0.5);\n\n return (\n \n {children}\n
\n );\n};\n\n// Swing - Swing/pendulum effect\ninterface SwingProps {\n children: React.ReactNode;\n angle?: number;\n speed?: number;\n damping?: number;\n durationInFrames?: number;\n style?: React.CSSProperties;\n}\n\nexport const Swing: React.FC = ({\n children,\n angle = 30,\n speed = 0.15,\n damping = 0.995,\n durationInFrames = 120,\n style,\n}) => {\n const frame = useCurrentFrame();\n\n const dampFactor = Math.pow(damping, frame);\n const rotation = Math.sin(frame * speed) * angle * dampFactor;\n\n return (\n \n {children}\n \n );\n};\n\n// Confetti - Falling confetti particles\ninterface ConfettiProps {\n count?: number;\n colors?: string[];\n style?: React.CSSProperties;\n}\n\nexport const Confetti: React.FC = ({\n count = 100,\n colors = ['#10b981', '#f59e0b', '#ef4444', '#3b82f6', '#8b5cf6', '#ec4899'],\n style,\n}) => {\n const frame = useCurrentFrame();\n const { width, height } = useVideoConfig();\n\n const confettiPieces = React.useMemo(() => {\n const seed = (n: number) => {\n const x = Math.sin(n * 9999) * 10000;\n return x - Math.floor(x);\n };\n\n return Array.from({ length: count }, (_, i) => ({\n x: seed(i) * width,\n startY: -50 - seed(i + 100) * 200,\n speed: 2 + seed(i + 200) * 4,\n rotation: seed(i + 300) * 360,\n rotationSpeed: (seed(i + 400) - 0.5) * 20,\n size: 8 + seed(i + 500) * 8,\n color: colors[Math.floor(seed(i + 600) * colors.length)],\n wobble: seed(i + 700) * Math.PI * 2,\n wobbleSpeed: 0.02 + seed(i + 800) * 0.05,\n }));\n }, [count, colors, width]);\n\n return (\n \n {confettiPieces.map((piece, i) => {\n const y = piece.startY + piece.speed * frame;\n const x = piece.x + Math.sin(frame * piece.wobbleSpeed + piece.wobble) * 30;\n const rotation = piece.rotation + piece.rotationSpeed * frame;\n\n if (y > height + 50) return null;\n\n return (\n
\n );\n })}\n