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[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/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"],"ItemStyles"] 52: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/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"],"CodeEditor"] 53: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"] 54:T1ee0,"use client" import * as React from "react" import { useComposedRefs } from "@/lib/0nlytype/refs" import { cn } from "@/lib/utils" type MarqueeProps = Omit, "children"> & { /** The words: each child is one word or phrase in the band. */ children: React.ReactNode /** * band: display words, each closed by a full stop, cropped by the frame's ends. * ticker: small capitals running between two hairlines. * counter: two rows of the band cropped against each other, running opposite ways. */ variant?: "band" | "ticker" | "counter" /** How far the words travel for each pixel the page scrolls. */ speed?: number /** Travel towards the start as you scroll down, instead of reading along towards the end. */ reverse?: boolean /** Names the list of words for readers. */ label?: string /** Drift between interactions. Reduced motion always keeps the band still. */ autoplay?: boolean /** Start with the visible play control, awaiting the person's choice. */ defaultPaused?: boolean pauseLabel?: string playLabel?: string "data-force"?: string } /** * A band of words that drifts, with a visible pause control. Scroll takes over and keeps step with smooth scrolling. * The first run of words is the list readers get; the copies that fill the band are hidden from them. */ function Marquee({ children, variant = "band", speed = 0.4, reverse = false, label, autoplay = true, defaultPaused = false, pauseLabel = "pause", playLabel = "play", "data-force": force, className, ref: forwardedRef, ...props }: MarqueeProps) { const ref = React.useRef(null) const composedRef = useComposedRefs(ref, forwardedRef) const [paused, setPaused] = React.useState(defaultPaused) const drift = React.useRef<(delta: number) => void>(() => {}) const [copies, setCopies] = React.useState(2) const words = React.Children.toArray(children) React.useEffect(() => { const el = ref.current const run = el?.querySelector(".ot-marquee-words") if (!el || !run) return const reduced = matchMedia("(prefers-reduced-motion: reduce)") let period = 0, frame = 0, carried = 0 // How far the band has risen through the view, times the speed, wrapped to one run of words. Read from the real // layout in a frame asked for by the scroll event, which runs after a smooth scroller's own frame. const read = () => { if (!period || reduced.matches || force?.split(" ").includes("reduced")) return const travelled = carried + (innerHeight - el.getBoundingClientRect().top) * speed el.style.setProperty("--o", `${((travelled % period) + period) % period}px`) } const measure = () => { period = run.offsetWidth // one run, its trailing gap included: a new face or size changes it el.style.setProperty("--period", `${period}px`) if (period) setCopies(Math.max(2, Math.ceil(el.clientWidth / period) + 1)) read() } drift.current = (delta) => { carried = period ? (carried + delta * 0.024) % period : 0 read() } const onScroll = () => { cancelAnimationFrame(frame) frame = requestAnimationFrame(read) } const resized = new ResizeObserver(measure) resized.observe(el) resized.observe(run) reduced.addEventListener("change", measure) addEventListener("scroll", onScroll, { passive: true }) return () => { cancelAnimationFrame(frame) resized.disconnect() reduced.removeEventListener("change", measure) drift.current = () => {} removeEventListener("scroll", onScroll) } }, [speed, force]) // A single clock for idle motion. Every pause cancels it; resuming starts with a fresh delta. React.useEffect(() => { const root = ref.current if (!root) return const reduced = matchMedia("(prefers-reduced-motion: reduce)") let running = false, held = false, visible = false, hovered = root.matches(":hover"), frame = 0, last = 0, timer = 0, restUntil = 0 const forced = force?.split(" ") ?? [] const tick = (time: number) => { if (!running) return const delta = last ? Math.min(time - last, 64) : 0 last = time drift.current(delta) if (running) frame = requestAnimationFrame(tick) } const sync = () => { running = false cancelAnimationFrame(frame) clearTimeout(timer) last = 0 const resting = performance.now() < restUntil const stopped = !autoplay || paused || reduced.matches || forced.includes("reduced") || forced.includes("hover") || forced.includes("focus") || !visible || hovered || held || root.contains(document.activeElement) || document.hidden root.dataset.autoplay = stopped || resting ? "paused" : "playing" if (stopped) return if (resting) timer = window.setTimeout(sync, restUntil - performance.now()) else { running = true; frame = requestAnimationFrame(tick) } } const rest = () => { restUntil = performance.now() + 1600 sync() } const enter = (event: PointerEvent) => { if (event.pointerType === "touch") return hovered = true rest() } const leave = () => { hovered = false; rest() } const down = () => { held = true; rest() } const up = () => { if (held) { held = false; rest() } } const seen = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; sync() }) seen.observe(root) root.addEventListener("pointerenter", enter) root.addEventListener("pointerleave", leave) root.addEventListener("pointerdown", down) addEventListener("pointerup", up) addEventListener("pointercancel", up) root.addEventListener("keydown", rest) root.addEventListener("focusin", rest) root.addEventListener("focusout", rest) addEventListener("scroll", rest, { passive: true }) document.addEventListener("visibilitychange", sync) reduced.addEventListener("change", sync) sync() return () => { running = false cancelAnimationFrame(frame) clearTimeout(timer) seen.disconnect() root.removeEventListener("pointerenter", enter) root.removeEventListener("pointerleave", leave) root.removeEventListener("pointerdown", down) removeEventListener("pointerup", up) removeEventListener("pointercancel", up) root.removeEventListener("keydown", rest) root.removeEventListener("focusin", rest) root.removeEventListener("focusout", rest) removeEventListener("scroll", rest) document.removeEventListener("visibilitychange", sync) reduced.removeEventListener("change", sync) } }, [autoplay, paused, force]) const rows = variant === "counter" ? 2 : 1 return (

{Array.from({ length: rows }, (_, row) => (

{Array.from({ length: copies }, (_, copy) => { const read = row === 0 && copy === 0 return (

{word}

) })}

))}

{autoplay && }

) } export { Marquee, type MarqueeProps } 55:T1637,@layer components { /* ── ot-marquee ── --o wraps the drift and the scroll to one run (--period). The frame clips every copy; its minimum width is zero, so a max-content track can never widen its containing grid or the page. */ .ot-marquee { --ot-marquee-dir: 1; --ot-marquee-gap: 0.32em; --o: 0px; --period: 0px; display: grid; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; max-inline-size: 100%; font-weight: 300; color: var(--ot-ink); } .ot-marquee-frame { min-inline-size: 0; overflow: clip; } .ot-marquee:is([dir="rtl"], [dir="rtl"] *) { --ot-marquee-dir: -1; } /* reading along runs the other way */ .ot-marquee-row { overflow: clip; } .ot-marquee-track { display: flex; inline-size: max-content; translate: calc(var(--o) * -1 * var(--ot-marquee-dir)) 0; } .ot-marquee-row[data-back] .ot-marquee-track { translate: calc((var(--o) - var(--period)) * var(--ot-marquee-dir)) 0; } .ot-marquee-words { display: flex; gap: var(--ot-marquee-gap); margin: 0; padding: 0 var(--ot-marquee-gap) 0 0; list-style: none; white-space: nowrap; } .ot-marquee-words:is([dir="rtl"] *) { padding: 0 0 0 var(--ot-marquee-gap); } .ot-marquee-words > li { margin: 0; } /* band: after "Renaissance." and "Less is more.", every word a statement closed by its full stop. */ .ot-marquee:not([data-variant="ticker"]) .ot-marquee-words > li::after { content: "."; } /* ticker: small capitals running between two hairlines, after the Renaissance poster's top row and the frame row of SHAPES / GRADIENTS. */ .ot-marquee[data-variant="ticker"] { --ot-marquee-gap: var(--ot-space-7); font: 500 var(--ot-pp) / var(--ot-pp-lh) var(--ot-voice); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ot-graphite); } .ot-marquee[data-variant="ticker"] .ot-marquee-frame { border-block: var(--ot-hairline) solid var(--ot-rule); padding-block: var(--ot-space-3); } /* counter: SPECTRA's two rows, the upper cut at its head and the lower at its feet, facing each other across one hairline and running opposite ways. Each word's box is trimmed to its cap height and baseline, so the cuts fall on the letters themselves in every face: into the capitals above, along the baseline below (the full stops stay). */ .ot-marquee[data-variant="counter"] .ot-marquee-row { overflow: visible; } .ot-marquee[data-variant="counter"] .ot-marquee-words > li { text-box: trim-both cap alphabetic; } .ot-marquee[data-variant="counter"] .ot-marquee-row:first-child { clip-path: inset(0 0 -1em 0); padding-block-end: 0.28em; } .ot-marquee[data-variant="counter"] .ot-marquee-row:first-child .ot-marquee-track { margin-block-start: -0.16em; } .ot-marquee[data-variant="counter"] .ot-marquee-row + .ot-marquee-row { clip-path: inset(-1em 0 0 0); padding-block-start: 0.14em; border-block-start: var(--ot-hairline) solid var(--ot-rule-strong); } /* Reduced motion: the words stand still and wrap, whole, as one list. */ @media (prefers-reduced-motion: reduce) { .ot-marquee-track { inline-size: auto; translate: none; } .ot-marquee-row[data-back] .ot-marquee-track { translate: none; } .ot-marquee-words { flex-wrap: wrap; white-space: normal; padding: 0; } .ot-marquee-words + .ot-marquee-words, .ot-marquee-row + .ot-marquee-row { display: none; } .ot-marquee-words { row-gap: 0; } .ot-marquee[data-variant="counter"] .ot-marquee-row:first-child { clip-path: none; padding: 0; } .ot-marquee[data-variant="counter"] .ot-marquee-row:first-child .ot-marquee-track { margin-block: 0; } .ot-marquee[data-variant="counter"] .ot-marquee-words > li { text-box: normal; } } /* The same small word beneath each autoplaying phrase; the parentheses are its only frame. */ .ot-marquee-pause { display: block; justify-self: start; appearance: none; border: 0; background: none; margin: 0; margin-block-start: var(--ot-space-3); padding: var(--ot-space-1) 0; min-block-size: var(--ot-space-5); color: var(--ot-pencil); font: 400 var(--ot-pp) / var(--ot-pp-lh) var(--ot-voice); letter-spacing: 0; text-transform: none; cursor: pointer; } .ot-marquee-pause::before { content: "( "; } .ot-marquee-pause::after { content: " )"; } .ot-marquee-pause:hover { color: var(--ot-ink); } .ot-marquee-pause:focus-visible { outline: var(--ot-stroke) solid var(--ot-accent); outline-offset: var(--ot-space-1); } .ot-marquee-pause:disabled { color: var(--ot-pencil); cursor: not-allowed; } .ot-marquee[data-force~="reduced"] .ot-marquee-pause { display: none; } @media (prefers-reduced-motion: reduce) { .ot-marquee-pause { display: none; } } @media (forced-colors: active) { .ot-marquee-pause { color: ButtonText; } .ot-marquee-pause:focus-visible { outline-color: Highlight; } } .ot-marquee[data-force~="reduced"] .ot-marquee-track { inline-size: auto; translate: none; } .ot-marquee[data-force~="reduced"] .ot-marquee-row[data-back] .ot-marquee-track { translate: none; } .ot-marquee[data-force~="reduced"] .ot-marquee-words { flex-wrap: wrap; white-space: normal; padding: 0; } .ot-marquee[data-force~="reduced"] .ot-marquee-words + .ot-marquee-words, .ot-marquee[data-force~="reduced"] .ot-marquee-row + .ot-marquee-row { display: none; } .ot-marquee[data-force~="reduced"] .ot-marquee-words { row-gap: 0; } .ot-marquee[data-force~="reduced"][data-variant="counter"] .ot-marquee-row:first-child { clip-path: none; padding: 0; } .ot-marquee[data-force~="reduced"][data-variant="counter"] .ot-marquee-row:first-child .ot-marquee-track { margin-block: 0; } .ot-marquee[data-force~="reduced"][data-variant="counter"] .ot-marquee-words > li { text-box: normal; } } 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":[null,["$","$L50",null,{"namespace":"@0nlytype","registryDependencies":["https://thedirectors.agency/ui/r/0nlytype.json"]}]]}],["$","$L51",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":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"../styles/0nlytype/marquee.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/0nlytype/ui/marquee.tsx","content":"$54","type":"registry:ui"},{"path":"registry/0nlytype/styles/marquee.css","content":"$55","type":"registry:file","target":"styles/0nlytype/marquee.css"}],"className":"h-[70svh] min-h-80"}]]}]