"use client" import { useState } from "react" import { AnimationOptions, motion, stagger, useAnimate } from "motion/react" interface TextProps { label: string reverse?: boolean transition?: AnimationOptions staggerDuration?: number staggerFrom?: "first" | "last" | "center" | number className?: string onClick?: () => void } const LetterSwapForward = ({ label, reverse = true, transition = { type: "spring", duration: 0.7, }, staggerDuration = 0.03, staggerFrom = "first", className, onClick, ...props }: TextProps) => { const [scope, animate] = useAnimate() const [blocked, setBlocked] = useState(false) const hoverStart = () => { if (blocked) return setBlocked(true) // Function to merge user transition with stagger and delay const mergeTransition = (baseTransition: AnimationOptions) => ({ ...baseTransition, delay: stagger(staggerDuration, { from: staggerFrom, }), }) animate( ".letter", { y: reverse ? "100%" : "-100%" }, mergeTransition(transition) ).then(() => { animate( ".letter", { y: 0, }, { duration: 0, } ).then(() => { setBlocked(false) }) }) animate( ".letter-secondary", { top: "0%", }, mergeTransition(transition) ).then(() => { animate( ".letter-secondary", { top: reverse ? "-100%" : "100%", }, { duration: 0, } ) }) } return ( {label} {label.split("").map((letter: string, i: number) => { return ( {letter} {letter} ) })} ) } export default LetterSwapForward

Letter Swap Forward Anim

Instalação

Dependências