Rotating text
Cycles through phrases with per-character enter and exit motion, in slide, flip, blur, scale, or drop effects.
A catalogue of Creative components
Each phrase enters character by character, holds, and leaves before the next one arrives.
Implementation
1"use client";2 3import {4 useEffect,5 useImperativeHandle,6 useMemo,7 useRef,8 useState,9 type CSSProperties,10 type MouseEvent as ReactMouseEvent,11 type Ref,12} from "react";13 14import { useReducedMotion } from "@/lib/media";15 16export type RotatingTextEffect = "slide" | "flip" | "blur" | "scale" | "drop";17export type RotatingTextDirection = "up" | "down";18export type RotatingTextSplit = "characters" | "words";19export type StaggerFrom = "first" | "last" | "center" | "random" | number;20 21export interface RotatingTextRef {22 next: () => void;23 previous: () => void;24 reset: () => void;25 jumpTo: (index: number) => void;26}27 28export interface RotatingTextProps {