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:T1e6e,"use client"; import * as React from "react"; import { animate } from "motion"; import { cn } from "@/lib/utils"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; import { motionTokens, trackMotion } from "@/lib/cojeev-motion/choreography"; import { measureTextLines, type TextLine } from "@/lib/cojeev/text-lines"; export type TextRevealProps = Omit, "children"> & { text: string; as?: "span" | "p" | "h1" | "h2" | "h3"; /** Change this value to deliberately replay the reveal. */ replayKey?: string | number; variant?: "rise" | "fade" | "soften" | "fold" | "bloom" | "scale" | "settle"; /** Lines use the browser's actual wrapping; graphemes keep emoji and marks intact. */ split?: "word" | "grapheme" | "text" | "line"; /** Milliseconds between units. The total delay is capped for long text. */ stagger?: number; direction?: "up" | "down"; duration?: number; }; function useTextLines(element: HTMLElement | null, text: string, active: boolean) { const [result, setResult] = React.useState<{ element: HTMLElement; text: string; lines: TextLine[] | null } | null>(null); React.useLayoutEffect(() => { const measure = element?.querySelector("[data-reveal-measure]"); if (!active || !element || !measure) return; let disposed = false; let frame = 0; let measuredStyle = ""; const schedule = () => { cancelAnimationFrame(frame); frame = requestAnimationFrame(() => { if (disposed || !element.getBoundingClientRect().width) return; const style = getComputedStyle(measure); const signature = [measure.clientWidth, style.font, style.fontFamily, style.fontWeight, style.fontSize, style.fontStretch, style.fontVariationSettings, style.fontFeatureSettings, style.letterSpacing, style.wordSpacing, style.lineHeight, style.textTransform, style.textIndent, style.direction].join("|"); if (signature === measuredStyle) return; measuredStyle = signature; const lines = measureTextLines(measure, text); setResult(previous => previous?.element === element && previous.text === text && JSON.stringify(previous.lines) === JSON.stringify(lines) ? previous : { element, text, lines }); }); }; const observer = new ResizeObserver(schedule); observer.observe(measure); // Typography can change its break points without changing the row count or // measured box size. Observe authored ancestor styles as well as geometry. const styles = new MutationObserver(schedule); for (let parent: HTMLElement | null = element; parent; parent = parent.parentElement) styles.observe(parent, { attributes: true }); const fontsChanged = () => { measuredStyle = ""; schedule(); }; document.fonts?.addEventListener("loadingdone", fontsChanged); void document.fonts?.ready.then(() => { if (!disposed) fontsChanged(); }); window.addEventListener("resize", schedule, { passive: true }); schedule(); return () => { disposed = true; cancelAnimationFrame(frame); observer.disconnect(); styles.disconnect(); document.fonts?.removeEventListener("loadingdone", fontsChanged); window.removeEventListener("resize", schedule); }; }, [active, text, element]); return result?.text === text && result.element === element ? result : null; } /** A bounded entrance. Text stays readable after playback, interruption, and without motion or JavaScript. */ export function TextReveal({ text, as: Tag = "span", replayKey = 0, variant = "rise", split = "word", stagger = 35, direction = "up", duration = 480, className, ...props }: TextRevealProps) { const host = React.useRef(null); const [mountedElement, setMountedElement] = React.useState(null); const setHost = React.useCallback((element: HTMLElement | null) => { host.current = element; setMountedElement(element); }, []); const { enabled, inView } = useMotionVisibility(host, mountedElement); const played = React.useRef(null); const token = JSON.stringify([text, replayKey, variant, split, direction]); const lineResult = useTextLines(mountedElement, text, split === "line"); const segmenter = React.useMemo(() => new Intl.Segmenter(undefined, { granularity: "grapheme" }), []); React.useEffect(() => { if (!inView || !host.current) return; if (split === "line" && !lineResult) return; if (played.current === token) return; played.current = token; if (!enabled) return; const words = Array.from(host.current.querySelectorAll("[data-reveal-unit]")); if (!words.length) return; const milliseconds = Number.isFinite(duration) ? Math.min(1500, Math.max(0, duration)) : 480; if (milliseconds === 0) return; const requestedStep = Number.isFinite(stagger) ? Math.min(120, Math.max(0, stagger)) / 1000 : motionTokens.stagger; // Compress the entire sequence evenly, so long headings don't finish in a // single pile-up once the delay ceiling has been reached. const step = Math.min(requestedStep, .6 / Math.max(1, words.length - 1)); const sign = direction === "up" ? 1 : -1; const scaled = variant === "bloom" || variant === "scale" || variant === "settle"; const distance = variant === "settle" ? .12 : .28; const scale = variant === "bloom" ? [.86, 1.025, 1] : variant === "scale" ? [.96, 1] : variant === "settle" ? [1.04, 1] : [1, 1]; const controls = animate(words, { "--reveal-opacity": [0, 1], "--reveal-y": variant !== "fade" && (!scaled || variant === "settle") ? [`${distance * sign}em`, "0em"] : ["0em", "0em"], "--reveal-blur": variant === "soften" ? ["5px", "0px"] : ["0px", "0px"], "--reveal-fold": variant === "fold" ? [`${-45 * sign}deg`, "0deg"] : ["0deg", "0deg"], "--reveal-scale": scale, }, { duration: milliseconds / 1000, delay: index => index * step, ease: [...motionTokens.ease.settle], "--reveal-scale": { inherit: true, times: variant === "bloom" ? [0, .7, 1] : [0, 1] }, }); const stop = trackMotion(controls); return () => { stop(); // Settle through the same Motion values so its queued render cannot // overwrite an inline cleanup with a half-revealed word on the next frame. const mounted = words.filter(word => word.isConnected); if (mounted.length) animate(mounted, { "--reveal-opacity": 1, "--reveal-y": "0em", "--reveal-blur": "0px", "--reveal-fold": "0deg", "--reveal-scale": 1 }, { duration: 0 }); }; }, [token, enabled, inView, duration, variant, stagger, direction, split, lineResult]); return {text} {split === "line" && } ; } 52:T6e5,@layer cojeev-states { .v-text-reveal { overflow-wrap: anywhere; } .v-text-reveal [data-reveal-word] { display: inline-block; max-inline-size:100%; overflow-wrap:anywhere; } .v-text-reveal [data-reveal-unit] { display:inline-block; max-inline-size:100%; opacity:var(--reveal-opacity,1); transform:perspective(12em) translateY(var(--reveal-y,0em)) rotateX(var(--reveal-fold,0deg)) scale(var(--reveal-scale,1)); transform-origin:50% 85%; filter:blur(var(--reveal-blur,0px)); } .v-text-reveal:is([data-reveal-variant="bloom"],[data-reveal-variant="scale"],[data-reveal-variant="settle"]) [data-reveal-unit] { transform-origin:50% 50%; } .v-text-reveal__accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .v-text-reveal[data-reveal-split="line"] { display:grid; position:relative; } .v-text-reveal [data-reveal-measure] { grid-area:1/1; min-inline-size:0; visibility:hidden; pointer-events:none; white-space:pre-wrap; overflow-wrap:anywhere; } .v-text-reveal[data-reveal-split="line"] [data-reveal-visual] { display:block; grid-area:1/1; min-inline-size:0; white-space:pre-wrap; } .v-text-reveal [data-reveal-line] { display:block; min-block-size:1lh; white-space:pre-wrap; } /* Preference changes reveal content immediately, including a pending Motion frame. */ :root[data-flow="off"] .v-text-reveal [data-reveal-unit], [data-flow="off"] .v-text-reveal [data-reveal-unit], .v-text-reveal[data-flow="off"] [data-reveal-unit], .v-text-reveal[data-motion-quiet="true"] [data-reveal-unit] { opacity: 1; transform: none; filter:none; } @media (prefers-reduced-motion: reduce) { .v-text-reveal [data-reveal-unit] { opacity: 1; transform: none; filter:none; } } } 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"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"}]]}]}]]}],["$","$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-reveal.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/text-reveal.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/text-reveal.css","content":"$52","type":"registry:file","target":"styles/cojeev/text-reveal.css"}],"className":"h-[70svh] min-h-80"}]]}]