'use client'; import { motion, VariantLabels, Target, TargetAndTransition, Transition, } from 'motion/react'; export type TextRollProps = { children: string; duration?: number; getEnterDelay?: (index: number) => number; getExitDelay?: (index: number) => number; className?: string; transition?: Transition; variants?: { enter: { initial: Target | VariantLabels | boolean; animate: TargetAndTransition | VariantLabels; }; exit: { initial: Target | VariantLabels | boolean; animate: TargetAndTransition | VariantLabels; }; }; onAnimationComplete?: () => void; }; export function TextRoll({ children, duration = 0.5, getEnterDelay = (i) => i * 0.1, getExitDelay = (i) => i * 0.1 + 0.2, className, transition = { ease: 'easeIn' }, variants, onAnimationComplete, }: TextRollProps) { const defaultVariants = { enter: { initial: { rotateX: 0 }, animate: { rotateX: 90 }, }, exit: { initial: { rotateX: 90 }, animate: { rotateX: 0 }, }, } as const; const letters = children.split(''); return ( {letters.map((letter, i) => { return ( ); })} {children} ); }

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build