'use client' import { motion, usePageInView } from "motion/react"; import { useEffect, useState } from "react"; interface FaceProps { children: React.ReactNode; transform: string; bgColorClass: string; width: number; height: number; } interface FaceData { text: string; transform: string; flip?: boolean; bgColorClass?: string; } interface Dimensions { width: number; height: number; } const Face = ({ children, transform, bgColorClass, width, height, }: FaceProps) => (

{children}

); const Box = () => { const [dimensions, setDimensions] = useState({ width: 300, height: 100, }); useEffect(() => { const handleResize = () => { if (window.innerWidth < 768) { setDimensions({ width: 250, height: 80 }); } else { setDimensions({ width: 300, height: 100 }); } }; handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); const { width, height } = dimensions; const depth = height / 2; const perspective = width * 2.5; const [rotation, setRotation] = useState(0); const rotationInterval = 2000; const rotationIncrement = 90; const isInView = usePageInView(); useEffect(() => { const rotate = () => { setRotation((prevRotation) => prevRotation + rotationIncrement); }; let intervalId: number | null = null; let timeoutId: number | null = null; if (isInView) { timeoutId = window.setTimeout(() => { rotate(); intervalId = window.setInterval(rotate, rotationInterval); }, 100); } return () => { if (timeoutId) clearTimeout(timeoutId); if (intervalId) clearInterval(intervalId); }; }, [isInView, rotationIncrement, rotationInterval]); const faces: FaceData[] = [ { text: "MOVE", transform: `rotateY(0deg) translateZ(${depth}px)` }, { text: "FEEL ALIVE", transform: `rotateY(180deg) translateZ(${depth}px)`, flip: true, }, { text: "BREATHE", transform: `rotateX(90deg) translateZ(${depth}px)` }, { text: "SHINE", transform: `rotateX(-90deg) translateZ(${depth}px)` }, ]; return (

{faces.map((face, index) => ( {face.flip ? ( {face.text} ) : ( face.text )} ))}

); }; export default function SpinningText() { return (

COMPONENTS THAT

); }

Copy Text Animation

Text Scale Animation

PERFECT FOR

Spinning Text Animation

COMPONENTS THAT

Text Pop Animate

Text Scroll Animation