4c: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"] 4d: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"] 4e: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"] 4f: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"] 50:T319c,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Meta } from "@/components/ui/typography"; import { useGuidanceMotion } from "@/lib/cojeev-motion/use-guidance-motion"; import { assignMotionRef } from "@/lib/cojeev-motion/refs"; import { advanceMarquee, marqueeDepth, marqueeScrollVelocity, type MarqueeMotion } from "@/lib/cojeev/marquee-motion"; export type MarqueeDirection = "left" | "right"; export type MarqueeSpeed = "slow" | "normal" | "fast"; export type MarqueeProps = React.ComponentProps<"section"> & { direction?: MarqueeDirection; speed?: MarqueeSpeed; /** Override the named pace with 0–160 CSS pixels per second. */ pixelsPerSecond?: number; respondToScroll?: boolean; /** Omit to follow document scrolling. The target should be mounted with the marquee. */ scrollTarget?: React.RefObject; presentation?: "flat" | "depth"; /** Depth presentation only. Perspective also scales to the viewport to keep the strip continuous. */ tiltX?: number; tiltY?: number; perspective?: number; depth?: number; label?: string; paused?: boolean; defaultPaused?: boolean; onPausedChange?: (paused: boolean) => void; }; const interactiveSelector = 'a[href],button,input,select,textarea,[contenteditable="true"],[tabindex]:not([tabindex="-1"])'; const bounded = (value: number, fallback: number, low: number, high: number) => Number.isFinite(value) ? Math.max(low, Math.min(high, value)) : fallback; /** One semantic list. Decorative copies never mount React effects or duplicate IDs. */ export function Marquee({ children, direction = "left", speed = "slow", pixelsPerSecond, respondToScroll = false, scrollTarget, presentation = "flat", tiltX = 4, tiltY = -18, perspective = 1000, depth = .65, label = "Highlights", paused, defaultPaused = false, onPausedChange, className, style, ref, onPointerEnter, onPointerLeave, onFocusCapture, onBlurCapture, ...props }: MarqueeProps) { const root = React.useRef(null), viewport = React.useRef(null), track = React.useRef(null); const source = React.useRef(null), copy = React.useRef(null), leadingCopy = React.useRef(null); const outerLeadingCopy = React.useRef(null), outerCopy = React.useRef(null); const attach = React.useCallback((node: HTMLElement | null) => { root.current = node; return assignMotionRef(ref, node); }, [ref]); const { enabled, inView, quiet } = useGuidanceMotion(root); const [localPaused, setLocalPaused] = React.useState(defaultPaused); const [hovered, setHovered] = React.useState(false), [focused, setFocused] = React.useState(false), [contentFocused, setContentFocused] = React.useState(false); const [interactive, setInteractive] = React.useState(false); const [measurement, setMeasurement] = React.useState({ period: 0, width: 0 }); const positions = React.useRef<{ node: HTMLElement; midpoint: number }[]>([]); const motion = React.useRef({ phase: 0, velocity: 0, scrollVelocity: 0, scrollDirection: 1 }); const id = React.useId(), manuallyPaused = paused ?? localPaused; const still = quiet || interactive || contentFocused; const pace = pixelsPerSecond === undefined ? measurement.period / (speed === "fast" ? 18 : speed === "normal" ? 30 : 44) : bounded(pixelsPerSecond, 28, 0, 160); const running = inView && enabled && !still && !manuallyPaused && !hovered && !focused && measurement.period > 0 && pace > 0; const settings = React.useRef({ pace, direction, respondToScroll, presentation, depth }); React.useEffect(() => { if (settings.current.direction !== direction) motion.current.scrollDirection = 1; settings.current = { pace, direction, respondToScroll, presentation, depth }; }, [pace, direction, respondToScroll, presentation, depth]); React.useEffect(() => { const list = source.current, duplicate = copy.current, leading = leadingCopy.current, outerLeading = outerLeadingCopy.current, outerTrailing = outerCopy.current, windowElement = viewport.current, element = root.current; if (!list || !duplicate || !leading || !outerLeading || !outerTrailing || !windowElement || !element) return; const copies = [outerLeading, leading, duplicate, outerTrailing]; let frame = 0, mirrorFrame = 0, disposed = false; const measure = () => { frame = 0; if (disposed) return; const width = windowElement.clientWidth; const cssWidth = `${width}px`; if (element.style.getPropertyValue("--marquee-viewport") !== cssWidth) element.style.setProperty("--marquee-viewport", cssWidth); const period = list.getBoundingClientRect().width; // offsetWidth is independent of the stage's authored perspective transform. const layoutPeriod = list.offsetWidth || period; motion.current.phase = layoutPeriod > 0 ? motion.current.phase % layoutPeriod : 0; positions.current = [outerLeading, leading, list, duplicate, outerTrailing].flatMap((parent, index) => Array.from(parent.children, node => ({ node: node as HTMLElement, midpoint: index * layoutPeriod + (node as HTMLElement).offsetLeft + (node as HTMLElement).offsetWidth / 2 }))); setMeasurement(old => old.period === layoutPeriod && old.width === width ? old : { period: layoutPeriod, width }); }; const schedule = () => { if (!frame) frame = requestAnimationFrame(measure); }; const mirror = () => { mirrorFrame = 0; const nodes = Array.from(list.children, child => child.cloneNode(true) as HTMLElement); for (const node of nodes) for (const part of [node, ...node.querySelectorAll("*")]) { for (const attribute of ["id", "name", "for", "form", "aria-labelledby", "aria-describedby", "aria-controls", "aria-owns"]) part.removeAttribute(attribute); if (part.matches(interactiveSelector)) part.tabIndex = -1; } for (const target of copies) target.replaceChildren(...nodes.map(node => node.cloneNode(true))); // A static original list keeps real controls usable without inert lookalikes. setInteractive(Boolean(list.querySelector(interactiveSelector))); element.dataset.ready = "true"; schedule(); }; mirror(); const mutation = new MutationObserver(records => { // Depth paint owns the immediate li style. Authored child attributes still // need to reach the copies, including links becoming interactive in place. const authored = records.some(record => !(record.type === "attributes" && record.attributeName === "style" && record.target.parentNode === list)); if (authored && !mirrorFrame) mirrorFrame = requestAnimationFrame(mirror); }); mutation.observe(list, { childList: true, characterData: true, subtree: true, attributes: true, attributeFilter: ["href", "tabindex", "contenteditable", "disabled", "src", "srcset", "alt", "title", "class", "style", "role", "aria-label", "aria-checked", "aria-pressed"] }); const resize = new ResizeObserver(schedule); resize.observe(windowElement); resize.observe(list); document.fonts.ready.then(() => { if (!disposed) schedule(); }); document.fonts.addEventListener("loadingdone", schedule); return () => { disposed = true; if (frame) cancelAnimationFrame(frame); if (mirrorFrame) cancelAnimationFrame(mirrorFrame); mutation.disconnect(); resize.disconnect(); document.fonts.removeEventListener("loadingdone", schedule); for (const target of copies) target.replaceChildren(); positions.current = []; delete element.dataset.ready; }; }, [children]); React.useEffect(() => { if (!running || !respondToScroll) return; const target = scrollTarget?.current ?? window; const read = () => target instanceof HTMLElement ? target.scrollTop : window.scrollY; let y = read(), time = performance.now(); const update = () => { const next = read(), now = performance.now(); motion.current.scrollVelocity = marqueeScrollVelocity(next - y, (now - time) / 1000); y = next; time = now; }; target.addEventListener("scroll", update, { passive: true }); return () => { target.removeEventListener("scroll", update); motion.current.scrollVelocity = 0; }; }, [running, respondToScroll, scrollTarget]); React.useEffect(() => { const node = track.current; if (!node) return; const paint = () => { // Two periods on each side cover both projected edges throughout a wrap. const offset = 2 * measurement.period + motion.current.phase; node.style.setProperty("--marquee-transform", `translate3d(${-offset}px, 0, 0)`); for (const item of positions.current) { const focus = settings.current.presentation === "depth" ? marqueeDepth(item.midpoint - offset, measurement.width, settings.current.depth) : { blur: 0, opacity: 1 }; item.node.style.setProperty("--marquee-item-filter", focus.blur ? `blur(${focus.blur.toFixed(2)}px)` : "none"); item.node.style.setProperty("--marquee-item-opacity", String(focus.opacity)); } }; paint(); if (!running) { motion.current.velocity = 0; return; } let frame = 0, previous: number | undefined; const tick = (time: number) => { const delta = previous === undefined ? 0 : (time - previous) / 1000; previous = time; const current = settings.current; motion.current = advanceMarquee(motion.current, delta, current.pace * (current.direction === "left" ? 1 : -1), measurement.period, current.respondToScroll); paint(); frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); return () => cancelAnimationFrame(frame); }, [running, measurement, presentation, depth]); const status = quiet ? "Motion is off" : interactive ? "Interactive list" : manuallyPaused ? "Paused" : focused ? "Paused while focused" : hovered ? "Paused while hovered" : running ? "Moving" : "Paused"; return

{ onPointerEnter?.(event); if (!event.defaultPrevented && event.pointerType !== "touch") setHovered(true); }} onPointerLeave={event => { onPointerLeave?.(event); setHovered(false); }} onFocusCapture={event => { onFocusCapture?.(event); setFocused(true); setContentFocused(Boolean(source.current?.contains(event.target))); }} onBlurCapture={event => { onBlurCapture?.(event); const next = event.relatedTarget; setFocused(next instanceof Node && event.currentTarget.contains(next)); setContentFocused(next instanceof Node && Boolean(source.current?.contains(next))); }}>

{label}

{status}

; } 51:T10da,@layer cojeev-states { [data-slot="marquee"] { --marquee-duration: 44s; --marquee-gap: var(--s-4); display: grid; gap: var(--s-4); min-inline-size: 0; color: var(--v-text); } [data-slot="marquee"][data-speed="normal"] { --marquee-duration: 30s; } [data-slot="marquee"][data-speed="fast"] { --marquee-duration: 18s; } [data-slot="marquee-header"], [data-slot="marquee-controls"] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); min-inline-size: 0; } [data-slot="marquee-header"] { justify-content: space-between; } [data-slot="marquee-controls"] { margin-inline-start: auto; } [data-slot="marquee-status"] { display: grid; align-items: center; inline-size: 18ch; min-block-size: 2lh; text-align: end; } [data-slot="marquee-viewport"] { min-inline-size: 0; overflow: hidden; padding-block: var(--s-2); } [data-slot="marquee-track"] { transform: var(--marquee-transform, none); display: flex; direction: ltr; inline-size: max-content; } [data-slot="marquee-stage"] { min-inline-size:0; } [data-slot="marquee"][data-presentation="depth"] [data-slot="marquee-viewport"] { padding-block:clamp(32px,5vw,64px); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } [data-slot="marquee"][data-presentation="depth"] [data-slot="marquee-stage"] { transform:perspective(var(--marquee-perspective)) rotateY(var(--marquee-tilt-y)) rotateX(var(--marquee-tilt-x)); transform-style:preserve-3d; } [data-slot="marquee-content"], [data-slot="marquee-copy"] { position:relative; display: flex; flex-shrink: 0; align-items: stretch; gap: var(--marquee-gap); min-inline-size: var(--marquee-viewport, 0px); margin: 0; padding: 0 var(--marquee-gap) 0 0; list-style: none; } [data-slot="marquee"] :is([data-slot="marquee-content"], [data-slot="marquee-copy"]) > li { filter: var(--marquee-item-filter, none); opacity: var(--marquee-item-opacity, 1); flex: 0 0 auto; min-inline-size: 0; max-inline-size: min(80vw, 30rem); overflow-wrap: anywhere; } [data-slot="marquee-copy"] { pointer-events: none; } [data-slot="marquee"]:is([data-motion="static"], [data-content-focused="true"], :not([data-ready="true"])) [data-slot="marquee-track"] { transform:none; inline-size: 100%; } [data-slot="marquee"][data-motion="static"] [data-slot="marquee-stage"] { transform:none; } [data-slot="marquee"][data-motion="static"] [data-slot="marquee-viewport"] { mask-image:none; } [data-slot="marquee"][data-motion="static"] [data-slot="marquee-content"] > li { filter:none; opacity:1; } [data-slot="marquee"]:is([data-motion="static"], [data-content-focused="true"], :not([data-ready="true"])) [data-slot="marquee-content"] { flex-wrap: wrap; min-inline-size: 0; inline-size: 100%; padding: 0; } [data-slot="marquee"]:is([data-motion="static"], [data-content-focused="true"], :not([data-ready="true"])) [data-slot="marquee-content"] > li { max-inline-size: 100%; } [data-slot="marquee"]:is([data-motion="static"], [data-content-focused="true"], :not([data-ready="true"])) [data-slot="marquee-content"] > li > * { max-inline-size: 100%; } [data-slot="marquee"]:is([data-motion="static"], [data-content-focused="true"], :not([data-ready="true"])) [data-slot="marquee-viewport"] { overflow: visible; } [data-slot="marquee"]:is([data-motion="static"], [data-content-focused="true"], :not([data-ready="true"])) [data-slot="marquee-copy"] { display: none; } @media (prefers-reduced-motion: reduce) { [data-slot="marquee"] [data-slot="marquee-track"] { transform:none; inline-size: 100%; } [data-slot="marquee"][data-presentation] [data-slot="marquee-stage"] { transform:none; } [data-slot="marquee"][data-presentation] [data-slot="marquee-viewport"] { mask-image:none; } [data-slot="marquee"] [data-slot="marquee-content"] > li { filter:none; opacity:1; } [data-slot="marquee"] [data-slot="marquee-content"] { flex-wrap: wrap; min-inline-size: 0; inline-size: 100%; padding: 0; } [data-slot="marquee"] [data-slot="marquee-content"] > li { max-inline-size: 100%; } [data-slot="marquee"] [data-slot="marquee-content"] > li > * { max-inline-size: 100%; } [data-slot="marquee"] [data-slot="marquee-viewport"] { overflow: visible; } [data-slot="marquee"] [data-slot="marquee-copy"] { display: none; } } } 4b:["$","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,["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/button.json","https://000h.cojeev.com/r/typography.json"]}]]}],["$","$L4d",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":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/marquee.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/marquee.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/marquee.css","content":"$51","type":"registry:file","target":"styles/cojeev/marquee.css"}],"className":"h-[70svh] min-h-80"}]]}]