"use client"; import { motion, useReducedMotion, type HTMLMotionProps, } from "motion/react"; import { type CSSProperties, type ReactNode } from "react"; export interface SpinningTextProps extends Omit, "children" | "animate" | "transition"> { /** Letters laid around the ring. */ children: string; /** Seconds per full rotation. Minimum 0.5. @default 10 */ duration?: number; /** Spin counter-clockwise. @default false */ reverse?: boolean; /** Ring radius in `ch` units — scales naturally with the inherited font-size. @default 5 */ radius?: number; /** Content rendered at the dead center (icon, badge, etc.). */ center?: ReactNode; } const SPIN_TRANSITION = { repeat: Infinity, ease: "linear" as const, }; const CENTER_STYLE: CSSProperties = { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", pointerEvents: "none", }; export function SpinningText({ children, duration = 10, reverse = false, radius = 5, center, className, style, ...rest }: SpinningTextProps) { const reduced = useReducedMotion(); const safeDuration = Math.max(0.5, duration); // Trailing space closes the ring so the last glyph doesn't kiss the first. const glyphs = (children + " ").split(""); const step = 360 / glyphs.length; const target = reverse ? -360 : 360; return ( {children} {glyphs.map((glyph, i) => ( ))} {center !== undefined && center !== null && ( )} ); }

Spinning Text

Customize

Usage