"use client"; import { useMemo } from "react"; import { motion } from "framer-motion"; import { ArrowUpRight } from "lucide-react"; import { cn } from "@/lib/utils"; const round = (n: number) => Math.round(n * 1000) / 1000; export function SpinningText({ children, radius = 118, duration = 26, reverse = false, className, letterClassName, }: { /** The text laid out around the circle. Passed as a plain string. */ children: string; /** Distance from the center to each glyph, in pixels. */ radius?: number; /** Seconds for one full revolution. */ duration?: number; /** Spin counter-clockwise instead of clockwise. */ reverse?: boolean; /** Class on the rotating wrapper. */ className?: string; /** Class applied to every glyph. */ letterClassName?: string; }) { const letters = useMemo(() => Array.from(children), [children]); const total = letters.length; return ( {letters.map((letter, i) => { const angle = round((360 / total) * i); return ( {letter === " " ? " " : letter} ); })} ); } function DotRing({ radius, count, duration = 44, }: { radius: number; count: number; duration?: number; }) { const dots = useMemo( () => Array.from({ length: count }, (_, i) => ({ angle: round((360 / count) * i), major: i % 6 === 0, })), [count] ); return ( {dots.map((d, i) => ( ))} ); } function SealCenter() { return (

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

{"EXPLORE THE COLLECTION • LUMENITE UI • "}

); }

Spinning Text