Circular text
Characters laid out around a circle with a steady spin, hover speed changes, an optional plane tilt, and a drag-to-fling gesture.
GAMMA • ORIGINAL • GAMMA • ORIGINAL •
Est. 2026Hover to change the spin speed, or drag the ring to fling it.
Implementation
1"use client";2 3import {4 useEffect,5 useMemo,6 useRef,7 useState,8 type CSSProperties,9 type PointerEvent as ReactPointerEvent,10 type ReactNode,11} from "react";12 13export type CircularTextHoverMode =14 "slowDown" | "speedUp" | "pause" | "goBonkers";15 16export interface CircularTextProps {17 text: string;18 spinDuration?: number;19 onHover?: CircularTextHoverMode;20 direction?: "clockwise" | "counterclockwise";21 size?: number;22 fontSize?: number;23 fontWeight?: number;24 letterSpacing?: number;25 color?: string;26 startAngle?: number;27 fill?: boolean;28 repeat?: number;