4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T2bb3,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { textRibbonPath, ribbonCopies, ribbonPeriod, advanceRibbonPhase, moveRibbonPhase, type TextRibbonShape } from "@/lib/cojeev/text-ribbon-path"; import { useGuidanceMotion } from "@/lib/cojeev-motion/use-guidance-motion"; import { assignMotionRef } from "@/lib/cojeev-motion/refs"; export type TextRibbonDirection = "forward" | "backward"; export type TextRibbonProps = Omit, "children"> & { text: string; shape?: TextRibbonShape; /** Automatic movement is opt-in. Pair it with a visible pause control. */ auto?: boolean; paused?: boolean; /** SVG units per second, bounded to 0–120. */ speed?: number; /** Supply direction/onDirectionChange to control direction after dragging. */ direction?: TextRibbonDirection; onDirectionChange?: (direction: TextRibbonDirection) => void; /** Wave and arch curvature, from a straight path (0) to the full curve (1). */ curvature?: number; hoverBehavior?: "pause" | "slow" | "quicken" | "none"; /** Horizontal drag, arrow keys and Home directly position the ribbon. */ draggable?: boolean; /** Size in the 640 × 280 SVG, bounded to 24–56. The entire ribbon scales responsively. */ fontSize?: number; separator?: string; guide?: boolean; tone?: "ink" | "pink" | "olive" | "blue" | "yellow"; }; /** A measured typographic path. Repeated glyphs are decorative; the actual phrase is read once. */ export function TextRibbon({ text, shape = "wave", auto = false, paused = false, speed = 28, direction, onDirectionChange, curvature = 1, hoverBehavior = "pause", draggable = false, fontSize = 40, separator = " · ", guide = true, tone = "ink", className, ref, onPointerEnter, onPointerLeave, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, onFocusCapture, onBlurCapture, style, ...props }: TextRibbonProps) { const host = React.useRef(null); const path = React.useRef(null); const sample = React.useRef(null); const textPath = React.useRef(null); const phase = React.useRef(0); const velocity = React.useRef(0); const drag = React.useRef<{ id: number; x: number; y: number; distance: number; claimed: boolean } | null>(null); const [dragging, setDragging] = React.useState(false); const [localDirection, setLocalDirection] = React.useState("forward"); const [measure, setMeasure] = React.useState({ unit: 0, count: 1 }); const [hovered, setHovered] = React.useState(false); const [focused, setFocused] = React.useState(false); const { quiet, enabled, inView } = useGuidanceMotion(host); const attach = React.useCallback((node: HTMLDivElement | null) => { host.current = node; return assignMotionRef(ref, node); }, [ref]); const id = `ribbon-${React.useId().replace(/:/g, "")}`; const size = Number.isFinite(fontSize) ? Math.min(56, Math.max(24, fontSize)) : 40; const pace = Number.isFinite(speed) ? Math.min(120, Math.max(0, speed)) : 28; const content = text.trim() ? text + separator : ""; const heading = direction ?? localDirection; if (dragging && (!draggable || !inView)) setDragging(false); const running = auto && !paused && !(hovered && hoverBehavior === "pause") && !focused && !dragging && !quiet && enabled && inView && measure.unit > 0 && pace > 0; const targetSpeed = Math.min(120, pace * (hovered ? hoverBehavior === "slow" ? .25 : hoverBehavior === "quicken" ? 2 : 1 : 1)) * (heading === "forward" ? 1 : -1); const targetVelocity = React.useRef(targetSpeed); React.useEffect(() => { targetVelocity.current = targetSpeed; }, [targetSpeed]); const changeDirection = (next: TextRibbonDirection) => { if (direction === undefined) setLocalDirection(next); if (next !== heading) onDirectionChange?.(next); }; const move = (distance: number) => { phase.current = moveRibbonPhase(phase.current, distance, measure.unit); textPath.current?.setAttribute("startOffset", String(-phase.current)); }; const finishDrag = (cancelled = false) => { const gesture = drag.current; drag.current = null; setDragging(false); if (!cancelled && gesture && Math.abs(gesture.distance) > 2) changeDirection(gesture.distance < 0 ? "forward" : "backward"); if (gesture && host.current?.hasPointerCapture(gesture.id)) host.current.releasePointerCapture(gesture.id); }; React.useEffect(() => { if (!draggable || !inView) { const gesture = drag.current; drag.current = null; if (gesture && host.current?.hasPointerCapture(gesture.id)) host.current.releasePointerCapture(gesture.id); } }, [draggable, inView]); React.useEffect(() => { const cancel = () => { const gesture = drag.current; drag.current = null; setDragging(false); if (gesture && host.current?.hasPointerCapture(gesture.id)) host.current.releasePointerCapture(gesture.id); }; const visibility = () => { if (document.hidden) cancel(); }; window.addEventListener("blur", cancel); document.addEventListener("visibilitychange", visibility); return () => { window.removeEventListener("blur", cancel); document.removeEventListener("visibilitychange", visibility); }; }, []); React.useEffect(() => { const node = host.current; if (!node) return; let disposed = false; let frame = 0; const read = () => { frame = 0; if (disposed || !sample.current || !path.current) return; const natural = sample.current.getComputedTextLength(); const length = path.current.getTotalLength(); const unit = ribbonPeriod(length, natural, shape === "loop" || shape === "figure-eight" || shape === "circle"); if (unit > 0 && length > 0) { phase.current = phase.current % unit; textPath.current?.setAttribute("startOffset", String(-phase.current)); } const count = ribbonCopies(length, unit); setMeasure(old => old.unit === unit && old.count === count ? old : { unit, count }); }; const schedule = () => { if (!frame) frame = requestAnimationFrame(read); }; read(); const resize = new ResizeObserver(schedule); resize.observe(node); document.fonts.ready.then(() => { if (!disposed) schedule(); }); document.fonts.addEventListener("loadingdone", schedule); return () => { disposed = true; if (frame) cancelAnimationFrame(frame); resize.disconnect(); document.fonts.removeEventListener("loadingdone", schedule); }; }, [content, shape, size, curvature]); React.useEffect(() => { if (!running || !textPath.current) { velocity.current = 0; return; } let frame = 0; let previous: number | undefined; const tick = (now: number) => { const elapsed = previous === undefined ? 0 : (now - previous) / 1000; previous = now; velocity.current += (targetVelocity.current - velocity.current) * (1 - Math.exp(-Math.min(.05, elapsed) * 7)); phase.current = advanceRibbonPhase(phase.current, elapsed, velocity.current, measure.unit); textPath.current?.setAttribute("startOffset", String(-phase.current)); frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); return () => cancelAnimationFrame(frame); }, [running, measure.unit]); return

{ onPointerEnter?.(event); if (!event.defaultPrevented && event.pointerType !== "touch") setHovered(true); }} onPointerLeave={event => { onPointerLeave?.(event); setHovered(false); }} onPointerDown={event => { onPointerDown?.(event); if (event.defaultPrevented || !draggable || !content || !event.isPrimary || event.button !== 0 || drag.current) return; drag.current = { id: event.pointerId, x: event.clientX, y: event.clientY, distance: 0, claimed: event.pointerType !== "touch" }; event.currentTarget.setPointerCapture(event.pointerId); setDragging(true); }} onPointerMove={event => { onPointerMove?.(event); const gesture = drag.current; if (!gesture || gesture.id !== event.pointerId || event.defaultPrevented) return; const dx = event.clientX - gesture.x, dy = event.clientY - gesture.y; if (!gesture.claimed) { if (Math.abs(dy) > 6 && Math.abs(dy) > Math.abs(dx)) { finishDrag(true); return; } if (Math.abs(dx) < 6) return; gesture.claimed = true; } const units = shape === "circle" ? 280 : 640; move(-dx * units / Math.max(1, event.currentTarget.getBoundingClientRect().width)); gesture.x = event.clientX; gesture.y = event.clientY; gesture.distance += dx; }} onPointerUp={event => { onPointerUp?.(event); if (drag.current?.id === event.pointerId) finishDrag(event.defaultPrevented); }} onPointerCancel={event => { onPointerCancel?.(event); finishDrag(true); }} onLostPointerCapture={event => { onLostPointerCapture?.(event); if (drag.current?.id === event.pointerId) finishDrag(true); }} onKeyDown={event => { onKeyDown?.(event); if (event.defaultPrevented || !draggable || event.target !== event.currentTarget || event.altKey || event.ctrlKey || event.metaKey) return; if (event.key === "ArrowLeft" || event.key === "ArrowRight") { event.preventDefault(); const forward = event.key === "ArrowLeft"; move(size * (event.shiftKey ? 2 : 1) * (forward ? 1 : -1)); changeDirection(forward ? "forward" : "backward"); } else if (event.key === "Home") { event.preventDefault(); move(-phase.current); } }} onFocusCapture={event => { onFocusCapture?.(event); setFocused(true); }} onBlurCapture={event => { onBlurCapture?.(event); if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) setFocused(false); }}> {text}

; } 52:T5d7,@layer cojeev-states { .v-text-ribbon { position:relative; width:100%; min-width:0; color:var(--v-text); } .v-text-ribbon[data-shape="circle"] { max-inline-size:20rem; justify-self:center; } .v-text-ribbon[data-draggable="true"] { touch-action:pan-y; cursor:grab; user-select:none; border-radius:var(--r-md,16px); } .v-text-ribbon[data-dragging="true"] { cursor:grabbing; } .v-text-ribbon:focus-visible { outline:2px solid var(--v-text); outline-offset:6px; } .v-text-ribbon > svg { display:block; width:100%; height:auto; overflow:hidden; } .v-text-ribbon text { font:500 var(--ribbon-size,40px) var(--font-display); letter-spacing:-.015em; fill:currentColor; } .v-text-ribbon__sample { visibility:hidden; } .v-text-ribbon__guide { fill:none; stroke:var(--v-border); stroke-width:1; vector-effect:non-scaling-stroke; } .v-text-ribbon[data-tone="pink"] { color:var(--v-text); --ribbon-accent:var(--v-pink); } .v-text-ribbon[data-tone="olive"] { color:var(--v-text); --ribbon-accent:var(--v-olive); } .v-text-ribbon[data-tone="blue"] { color:var(--v-text); --ribbon-accent:var(--v-blue); } .v-text-ribbon[data-tone="yellow"] { color:var(--v-text); --ribbon-accent:var(--v-yellow); } .v-text-ribbon:not([data-tone="ink"]) .v-text-ribbon__guide { stroke:var(--ribbon-accent); stroke-width:18; stroke-linecap:round; opacity:.7; } .v-text-ribbon__accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } } 4c:["$","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":[null,["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/text-ribbon.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/text-ribbon.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/text-ribbon.css","content":"$52","type":"registry:file","target":"styles/cojeev/text-ribbon.css"}],"className":"h-[70svh] min-h-80"}]]}]