Scroll or drag the text. Arrow keys fling it.

); } ``` ## Accessibility & performance Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through. ## Source (`gyre.tsx`) ```tsx "use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { useVisibilityPause } from "@/hooks/use-visibility-pause"; /** Imperative handle exposed through `GyreProps.ref`. */ export interface GyreHandle { /** Re-run the intro: the guide path draws in again and the text re-reveals along it. */ replay: () => void; /** * Fling the text along the path. Impulses stack with any glide already in * progress. Positive = forward along the path. @default 260 (units/s) */ nudge: (velocity?: number) => void; } export type GyrePreset = "circle" | "wave" | "loop" | "arc"; export interface GyreProps extends Omit, "children" | "color"> { /** The phrase that flows along the path. Repeated internally to fill it; exposed once to assistive tech. */ text?: string; /** Built-in path shape. Ignored when `path` is set. @default "circle" */ preset?: GyrePreset; /** Custom SVG path `d` string. Paths ending in `Z` loop seamlessly as closed shapes. */ path?: string; /** * viewBox for a custom `path`. When omitted it is derived from the path's * bounding box after mount (padded for glyph height). */ viewBox?: string; /** Drift speed in viewBox units per second. Negative reverses. @default 60 */ speed?: number; /** * Couple the drift to page scroll. `"speed"` adds a smoothed boost from scroll * velocity that decays back to base; `"direction"` also flips travel with the * scroll direction. @default "speed" */ scrollReactive?: false | "speed" | "direction"; /** Pointer-drag scrubs the text along the path, gliding on release. Also enables arrow-key nudges. @default true */ draggable?: boolean; /** Ease the drift to a halt while a mouse hovers the text. @default true */ pauseOnHover?: boolean; /** Draw a faint guide stroke along the path (it draws in during the intro). @default false */ showPath?: boolean; /** Joins each repetition of `text`. Rendered at reduced opacity. @default " • " */ separator?: string; /** Glyph size in viewBox units. Defaults per preset (circle 30, wave 34, loop 28, arc 34, custom 24). */ fontSize?: number; /** Extra letter spacing in em, applied before seam-fitting. @default 0.04 */ tracking?: number; /** Text color. Defaults to `currentColor` (inherits — neutral-100 out of the box). */ color?: string; /** Freeze the autoplay drift and scroll coupling. Dragging still works. @default false */ paused?: boolean; /** Imperative handle — `replay()` and `nudge(velocity?)`. */ ref?: React.Ref; } interface PresetDef { d: string; viewBox: string; fontSize: number; } const PRESETS: Record = { // Starts at 12 o'clock, travels clockwise; glyphs ride the outside like a badge. circle: { d: "M 200 50 A 150 150 0 1 1 200 350 A 150 150 0 1 1 200 50 Z", viewBox: "0 0 400 400", fontSize: 30, }, // Two full periods of a soft sine. wave: { d: "M 0 130 C 66.7 50 133.3 50 200 130 S 333.3 210 400 130 S 533.3 50 600 130 S 733.3 210 800 130", viewBox: "0 0 800 240", fontSize: 34, }, // Smooth closed figure-eight. loop: { d: "M 300 160 C 380 50 560 50 560 160 S 380 270 300 160 C 220 50 40 50 40 160 S 220 270 300 160 Z", viewBox: "0 0 600 320", fontSize: 28, }, // Shallow upward arch. arc: { d: "M 60 230 A 260 260 0 0 1 540 230", viewBox: "0 0 600 260", fontSize: 34, }, }; interface Measure { /** Path length. */ L: number; /** Seamless period of one rendered copy. */ T: number; /** Units (text + separator) per copy. */ units: number; /** Letter spacing (user units) applied to the flowing copies. */ spacing: number; /** Sampled path points [x0, y0, x1, y1, ...] for drag projection. */ samples: Float32Array; closed: boolean; bbox: string; } const INTRO_PATH = 0.9; const INTRO_TEXT = 1.2; const easeOut = (t: number) => 1 - Math.pow(1 - Math.min(1, Math.max(0, t)), 3); const mod = (a: number, n: number) => ((a % n) + n) % n; /** * Gyre — a line of text flowing along an SVG path, looping seamlessly. The * phrase is repeated to fill the measured path length and, on closed shapes, * its spacing is fitted so an exact whole number of repetitions meets at the * seam. Base drift picks up a smoothed boost from scroll velocity; drag scrubs * the text along the path's own tangent with release inertia; arrow keys fling * it. Intro: the guide path draws in, then the text unveils along it from the * start. All motion is written straight to `startOffset` in one rAF loop that * pauses offscreen and on hidden tabs. Reduced motion: static text along the path. */ export function Gyre({ text = "Scroll or drag the text", preset = "circle", path, viewBox, speed = 60, scrollReactive = "speed", draggable = true, pauseOnHover = true, showPath = false, separator = " • ", fontSize, tracking = 0.04, color, paused = false, ref, className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onPointerEnter, onPointerLeave, onKeyDown, ...props }: GyreProps) { const reducedMotion = useReducedMotion(); const rawId = React.useId(); const uid = "gyre" + rawId.replace(/[^a-zA-Z0-9_-]/g, ""); const pathId = `${uid}-p`; const maskId = `${uid}-m`; const blurId = `${uid}-b`; const def = path ? null : PRESETS[preset] ?? PRESETS.circle; const d = path ?? def!.d; const size = fontSize ?? def?.fontSize ?? 24; const letter = tracking * size; const svgRef = React.useRef(null); const pathRef = React.useRef(null); const measureTextRef = React.useRef(null); const tpA = React.useRef(null); const tpB = React.useRef(null); const flowRef = React.useRef(null); const maskPathRef = React.useRef(null); const guideRef = React.useRef(null); const [measure, setMeasure] = React.useState(null); const measureRef = React.useRef(null); measureRef.current = measure; const live = React.useRef({ speed, scrollReactive, pauseOnHover, paused, draggable }); live.current = { speed, scrollReactive, pauseOnHover, paused, draggable }; const sim = React.useRef({ phase: 0, momentum: 0, mul: 1, boost: 0, dir: 1, hovered: false, dragging: false, pointerId: -1, lastX: 0, lastY: 0, lastMoveT: 0, dragVel: 0, introStart: -1, introDone: false, last: 0, scrollY: Number.NaN, scrollT: 0, writtenA: Number.NaN, }); // --- measure after mount (SSR-safe): path length, one unit's advance, samples --- const unitText = text + separator; const unitChars = [...unitText].length || 1; React.useEffect(() => { let cancelled = false; const run = () => { const p = pathRef.current; const mt = measureTextRef.current; if (cancelled || !p || !mt) return; const L = p.getTotalLength(); const P = mt.getComputedTextLength(); if (!(L > 0) || !(P > 0)) return; const closed = /z\s*$/i.test(d.trim()); let units: number; let spacing = letter; let T: number; if (closed) { // Fit a whole number of units exactly into the loop so the seam vanishes. units = Math.max(1, Math.round(L / P)); spacing = letter + (L / units - P) / unitChars; T = L; } else { units = Math.max(1, Math.ceil(L / P)); T = units * P; } const n = Math.round(Math.min(480, Math.max(96, L / 4))); const samples = new Float32Array(n * 2); for (let i = 0; i < n; i++) { const pt = p.getPointAtLength((i / (closed ? n : n - 1)) * L); samples[i * 2] = pt.x; samples[i * 2 + 1] = pt.y; } const b = p.getBBox(); const pad = size * 1.5; const bbox = `${b.x - pad} ${b.y - pad} ${b.width + pad * 2} ${b.height + pad * 2}`; sim.current.writtenA = Number.NaN; setMeasure({ L, T, units, spacing, samples, closed, bbox }); }; run(); const fonts = typeof document !== "undefined" ? document.fonts : undefined; fonts?.ready.then(run).catch(() => {}); fonts?.addEventListener?.("loadingdone", run); return () => { cancelled = true; fonts?.removeEventListener?.("loadingdone", run); }; }, [d, unitText, unitChars, size, letter, className]); // Reduced-motion toggles reset the intro so the imperative mask state re-syncs. React.useEffect(() => { sim.current.introStart = -1; sim.current.introDone = false; sim.current.writtenA = Number.NaN; }, [reducedMotion]); // --- the single rAF loop --- const rootRef = useVisibilityPause( (elapsed) => { const m = measureRef.current; const s = sim.current; const cfg = live.current; const dt = Math.min(0.05, Math.max(0, elapsed - s.last)); s.last = elapsed; if (!m) return; // Intro — starts the first frame the component is visible (loop is in-view gated). if (s.introStart < 0) { s.introStart = elapsed; flowRef.current?.setAttribute("mask", `url(#${maskId})`); } if (!s.introDone) { const t = elapsed - s.introStart; const pathP = easeOut(t / INTRO_PATH); const textDelay = guideRef.current ? INTRO_PATH * 0.55 : 0; const textP = easeOut((t - textDelay) / INTRO_TEXT); guideRef.current?.setAttribute("stroke-dashoffset", String(1 - pathP)); maskPathRef.current?.setAttribute("stroke-dashoffset", String(1 - textP)); flowRef.current?.setAttribute("opacity", String(Math.min(1, textP * 3))); if (pathP >= 1 && textP >= 1) { s.introDone = true; flowRef.current?.removeAttribute("mask"); } } // Scroll velocity (window scroll), smoothed; skipped across loop pauses. const now = performance.now(); let target = 0; if (cfg.scrollReactive && !cfg.paused) { const y = window.scrollY; if (!Number.isNaN(s.scrollY) && now - s.scrollT < 120 && dt > 0) { const raw = Math.max(-6000, Math.min(6000, (y - s.scrollY) / dt)); if (Math.abs(raw) > 30) s.dir = raw > 0 ? 1 : -1; target = raw * 0.45; } s.scrollY = y; s.scrollT = now; } s.boost += (target - s.boost) * (1 - Math.exp(-dt * 5)); const halt = cfg.paused || s.dragging || (cfg.pauseOnHover && s.hovered); s.mul += ((halt ? 0 : 1) - s.mul) * (1 - Math.exp(-dt * 6)); const base = cfg.paused ? 0 : cfg.speed; const sign = base === 0 ? 1 : Math.sign(base); let v: number; if (cfg.scrollReactive === "direction") { v = s.dir * (Math.abs(base) + Math.abs(s.boost)); } else if (cfg.scrollReactive === "speed") { v = base + sign * Math.abs(s.boost); } else { v = base; } if (!s.dragging) { s.momentum *= Math.exp(-dt * 2.4); if (Math.abs(s.momentum) < 0.5) s.momentum = 0; } s.phase = mod(s.phase + (v * s.mul + (s.dragging ? 0 : s.momentum)) * dt, m.T); if (Math.abs(s.phase - s.writtenA) > 0.01 || Number.isNaN(s.writtenA)) { s.writtenA = s.phase; tpA.current?.setAttribute("startOffset", String(s.phase)); tpB.current?.setAttribute("startOffset", String(s.phase - m.T)); } }, { paused: reducedMotion } ); React.useImperativeHandle( ref, () => ({ replay: () => { const s = sim.current; s.introStart = -1; s.introDone = false; }, nudge: (velocity = 260) => { sim.current.momentum += velocity; }, }), [] ); // --- drag: project pointer motion onto the path tangent nearest the pointer --- const toUser = (clientX: number, clientY: number) => { const svg = svgRef.current; const ctm = svg?.getScreenCTM(); if (!svg || !ctm) return null; const inv = ctm.inverse(); return { x: inv.a * clientX + inv.c * clientY + inv.e, y: inv.b * clientX + inv.d * clientY + inv.f, }; }; const interactive = draggable && !reducedMotion; const handlePointerDown = (e: React.PointerEvent) => { onPointerDown?.(e); if (!interactive || e.button !== 0 || e.defaultPrevented) return; const pt = toUser(e.clientX, e.clientY); if (!pt) return; const s = sim.current; s.dragging = true; s.pointerId = e.pointerId; s.lastX = pt.x; s.lastY = pt.y; s.lastMoveT = performance.now(); s.dragVel = 0; s.momentum = 0; e.currentTarget.setPointerCapture(e.pointerId); }; const handlePointerMove = (e: React.PointerEvent) => { onPointerMove?.(e); const s = sim.current; const m = measureRef.current; if (!s.dragging || e.pointerId !== s.pointerId || !m) return; const pt = toUser(e.clientX, e.clientY); if (!pt) return; const dx = pt.x - s.lastX; const dy = pt.y - s.lastY; s.lastX = pt.x; s.lastY = pt.y; // Nearest sample to the pointer → local tangent. const smp = m.samples; const n = smp.length / 2; let best = 0; let bestD = Infinity; for (let i = 0; i < n; i++) { const ex = smp[i * 2] - pt.x; const ey = smp[i * 2 + 1] - pt.y; const dd = ex * ex + ey * ey; if (dd < bestD) { bestD = dd; best = i; } } const i0 = m.closed ? mod(best - 1, n) : Math.max(0, best - 1); const i1 = m.closed ? mod(best + 1, n) : Math.min(n - 1, best + 1); let tx = smp[i1 * 2] - smp[i0 * 2]; let ty = smp[i1 * 2 + 1] - smp[i0 * 2 + 1]; const len = Math.hypot(tx, ty) || 1; tx /= len; ty /= len; const along = dx * tx + dy * ty; s.phase = mod(s.phase + along, m.T); const now = performance.now(); const elapsedMs = Math.max(1, now - s.lastMoveT); s.lastMoveT = now; const inst = (along / elapsedMs) * 1000; s.dragVel += (inst - s.dragVel) * 0.35; }; const endDrag = (e: React.PointerEvent) => { const s = sim.current; if (!s.dragging || e.pointerId !== s.pointerId) return; s.dragging = false; // Stale velocity (pointer held still before release) shouldn't fling. const idle = performance.now() - s.lastMoveT; const v = idle > 90 ? 0 : s.dragVel; s.momentum = Math.max(-3200, Math.min(3200, v)); if (e.currentTarget.hasPointerCapture(e.pointerId)) { e.currentTarget.releasePointerCapture(e.pointerId); } }; const handleKeyDown = (e: React.KeyboardEvent) => { onKeyDown?.(e); if (!interactive || e.defaultPrevented) return; const step = e.shiftKey ? 780 : 260; if (e.key === "ArrowRight" || e.key === "ArrowDown") { e.preventDefault(); sim.current.momentum += step; } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") { e.preventDefault(); sim.current.momentum -= step; } }; const vb = viewBox ?? def?.viewBox ?? measure?.bbox ?? "0 0 400 400"; const vbn = vb.split(/[\s,]+/).map(Number); const [vx = 0, vy = 0, vw = 400, vh = 400] = vbn; const units = measure?.units ?? 0; const copy = (key: string, r: React.Ref, offset: number) => ( {Array.from({ length: units }, (_, i) => ( {text} {separator} ))} ); return (

{ onPointerUp?.(e); endDrag(e); }} onPointerCancel={(e) => { onPointerCancel?.(e); endDrag(e); }} onPointerEnter={(e) => { onPointerEnter?.(e); if (e.pointerType === "mouse") sim.current.hovered = true; }} onPointerLeave={(e) => { onPointerLeave?.(e); sim.current.hovered = false; }} onKeyDown={handleKeyDown} {...props} > {text}

); } ```