50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2c0b,'use client'; import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'; import { cancelFrame, frame, motion, useMotionValue, useReducedMotion, useSpring, type FrameData } from 'motion/react'; type HoverMode = 'slowDown' | 'speedUp' | 'pause' | 'goBonkers'; interface CircularTextProps { text: string; spinDuration?: number; onHover?: HoverMode; direction?: 'clockwise' | 'counterclockwise'; size?: number; fontSize?: number; fontWeight?: number; letterSpacing?: number; color?: string; startAngle?: number; fill?: boolean; repeat?: number; ring?: boolean; ringColor?: string; tilt?: number; hoverTilt?: number; draggable?: boolean; children?: React.ReactNode; className?: string; } interface SpinState { dragging: boolean; hovering: boolean; fling: number; cruise: number; angle: number | null; travel: number; samples: [number, number][]; } const HOVER_SPEED: Record = { slowDown: 0.5, speedUp: 4, pause: 0, goBonkers: 20 }; const MAX_FLING = 1440; const LETTER_EASE = 'transition-transform duration-500 ease-[cubic-bezier(0,0,0,1)]'; const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect; const clamp = (v: number, a: number, b: number): number => (v < a ? a : v > b ? b : v); const CircularText: React.FC = ({ text, spinDuration = 20, onHover = 'speedUp', direction = 'clockwise', size = 200, fontSize = 24, fontWeight = 900, letterSpacing = 0, color = '', startAngle = 0, fill = true, repeat = 1, ring = false, ringColor = '', tilt = 0, hoverTilt = 0, draggable = false, children, className = '' }: CircularTextProps) => { const rootRef = useRef(null); const glyphRefs = useRef<(HTMLSpanElement | null)[]>([]); const stateRef = useRef({ dragging: false, hovering: false, fling: 0, cruise: 0, angle: null, travel: 0, samples: [] }); const [advances, setAdvances] = useState(null); const [settled, setSettled] = useState(false); const [dragging, setDragging] = useState(false); const reduceMotion = useReducedMotion(); const rotation = useMotionValue(0); const speed = useSpring(1, { stiffness: 60, damping: 18 }); const scale = useSpring(1, { stiffness: 300, damping: 20 }); const tiltX = useSpring(0, { stiffness: 150, damping: 18 }); const tiltY = useSpring(0, { stiffness: 150, damping: 18 }); const glyphs = useMemo(() => Array.from(text ?? ''), [text]); const copies = Math.max(1, Math.round(repeat) || 1); const letters = useMemo(() => Array.from({ length: copies }, () => glyphs).flat(), [glyphs, copies]); const angles = useMemo(() => { const count = glyphs.length; if (!count) return []; if (fill) return letters.map((_, i) => startAngle + (360 / letters.length) * i); const known = advances && advances.length === count ? advances : null; const toDegrees = 180 / (Math.PI * Math.max(size / 2 - fontSize * 0.6, 1)); const arcs = glyphs.map((glyph, i) => { const width = known ? known[i] : fontSize * (glyph === ' ' ? 0.3 : 0.6); return Math.max(0, width + letterSpacing * fontSize) * toDegrees; }); const span = arcs.reduce((sum, arc) => sum + arc, 0); const fit = span > 0 ? Math.min(1, 360 / (span * copies)) : 1; const result: number[] = []; for (let copy = 0; copy < copies; copy += 1) { let cursor = startAngle + (360 / copies) * copy - (arcs[0] * fit) / 2; for (let i = 0; i < count; i += 1) { const arc = arcs[i] * fit; result.push(cursor + arc / 2); cursor += arc; } } return result; }, [glyphs, letters, copies, fill, startAngle, size, fontSize, letterSpacing, advances]); useIsomorphicLayoutEffect(() => { if (fill) return undefined; let alive = true; const measure = () => { if (!alive) return; const widths = glyphs.map((_, i) => glyphRefs.current[i]?.offsetWidth ?? 0); setAdvances(prev => prev && prev.length === widths.length && prev.every((width, i) => width === widths[i]) ? prev : widths ); }; measure(); document.fonts?.ready.then(measure).catch(() => {}); return () => { alive = false; }; }, [fill, glyphs, fontSize, fontWeight, className]); useEffect(() => { const id = requestAnimationFrame(() => setSettled(true)); return () => cancelAnimationFrame(id); }, []); useEffect(() => { const root = rootRef.current; const state = stateRef.current; const turn = direction === 'counterclockwise' ? -1 : 1; state.cruise = spinDuration > 0 && !reduceMotion ? (360 / spinDuration) * turn : 0; if (!root || reduceMotion) return undefined; const spin = ({ delta }: FrameData) => { if (state.dragging) return; const dt = Math.min(delta, 100) / 1000; state.fling *= Math.exp(-dt / 0.7); if (Math.abs(state.fling) < 1) state.fling = 0; const velocity = state.cruise * speed.get() + state.fling; if (velocity) rotation.set((rotation.get() + velocity * dt) % 360); }; let running = false; const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting === running) return; running = entry.isIntersecting; if (running) frame.update(spin, true); else cancelFrame(spin); }); observer.observe(root); return () => { observer.disconnect(); cancelFrame(spin); }; }, [spinDuration, direction, reduceMotion, rotation, speed]); useEffect(() => { if (hoverTilt && !reduceMotion) return; tiltX.set(0); tiltY.set(0); }, [hoverTilt, reduceMotion, tiltX, tiltY]); const applyScale = () => { const state = stateRef.current; const bonkers = state.hovering && onHover === 'goBonkers' && !reduceMotion; scale.set((bonkers ? 0.8 : 1) * (state.dragging ? 0.96 : 1)); }; const pointerAngle = (e: React.PointerEvent): number | null => { const root = rootRef.current; if (!root) return null; const rect = root.getBoundingClientRect(); const dx = e.clientX - (rect.left + rect.width / 2); const dy = e.clientY - (rect.top + rect.height / 2); if (Math.hypot(dx, dy) < rect.width * 0.06) return null; return (Math.atan2(dy, dx) * 180) / Math.PI; }; const handleEnter = () => { stateRef.current.hovering = true; if (onHover && !reduceMotion) speed.set(HOVER_SPEED[onHover] ?? 1); applyScale(); }; const handleLeave = () => { stateRef.current.hovering = false; speed.set(1); tiltX.set(0); tiltY.set(0); applyScale(); }; const handleMove = (e: React.PointerEvent) => { const state = stateRef.current; const root = rootRef.current; if (!root) return; if (state.dragging) { const angle = pointerAngle(e); if (angle !== null) { if (state.angle !== null) { let delta = angle - state.angle; if (delta > 180) delta -= 360; if (delta < -180) delta += 360; state.travel += delta; rotation.set((rotation.get() + delta) % 360); state.samples.push([e.timeStamp, state.travel]); while (state.samples.length > 2 && e.timeStamp - state.samples[0][0] > 100) state.samples.shift(); } state.angle = angle; } } if (!hoverTilt || reduceMotion || e.pointerType === 'touch') return; const rect = root.getBoundingClientRect(); const nx = clamp(((e.clientX - rect.left) / rect.width) * 2 - 1, -1, 1); const ny = clamp(((e.clientY - rect.top) / rect.height) * 2 - 1, -1, 1); tiltX.set(-ny * hoverTilt); tiltY.set(nx * hoverTilt); }; const handleDown = (e: React.PointerEvent) => { if (!draggable || (e.pointerType === 'mouse' && e.button !== 0)) return; const state = stateRef.current; state.dragging = true; state.fling = 0; state.angle = pointerAngle(e); state.travel = 0; state.samples = [[e.timeStamp, 0]]; e.currentTarget.setPointerCapture?.(e.pointerId); setDragging(true); applyScale(); }; const handleUp = (e: React.PointerEvent) => { const state = stateRef.current; if (!state.dragging) return; state.dragging = false; setDragging(false); applyScale(); const [startTime, startTravel] = state.samples[0]; const lastTime = state.samples[state.samples.length - 1][0]; const elapsed = e.timeStamp - startTime; const velocity = elapsed > 0 && e.timeStamp - lastTime < 80 ? ((state.travel - startTravel) / elapsed) * 1000 : 0; state.fling = reduceMotion ? 0 : clamp(velocity, -MAX_FLING, MAX_FLING) - state.cruise * speed.get(); }; return (

{letters.map((letter, i) => ( { glyphRefs.current[i] = el; } : undefined } > {letter} ))}

{children != null && children !== false ? (

{children}

) : null}

); }; export default CircularText; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion@^12.23.12",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion@^12.23.12"}]]}]}]]}],["$","$L50",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"CircularText/CircularText.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]