51: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"] 52:T121c,"use client"; import { useEffect, useRef, useState, type CSSProperties } from "react"; /* * Text Reveal – a text effect, in a single self-contained file. * When the text scrolls into view it arrives piece by piece – word by word or letter by letter – * each piece fading in out of a soft blur while it rises a little, one after another. * Screen readers get the whole sentence at once; the moving pieces are hidden from them. * Font, size and color come from the parent. */ export type TextRevealProps = { /** The text to reveal */ text: string; /** Reveal word by word or letter by letter */ by?: "word" | "char"; /** Time between two pieces, in ms */ stagger?: number; /** Wait before the first piece, in ms */ delay?: number; /** Time each piece takes to arrive, in ms */ duration?: number; /** Element to render */ as?: "p" | "h1" | "h2" | "h3" | "span"; /** Reveal only the first time; otherwise it plays again each time it enters the view */ once?: boolean; className?: string; }; export function TextReveal({ text, by = "word", stagger = 40, delay = 0, duration = 700, as: Tag = "p", once = true, className }: TextRevealProps) { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const el = ref.current; if (!el || typeof IntersectionObserver === "undefined") return setShown(true); const io = new IntersectionObserver( (entries) => { for (const e of entries) { if (e.isIntersecting) { setShown(true); if (once) io.disconnect(); } else if (!once) { setShown(false); } } }, { threshold: 0.3 }, ); io.observe(el); return () => io.disconnect(); }, [once]); // Words and the whitespace between them; whitespace stays plain text so lines wrap normally let i = 0; const parts = text.split(/(\s+)/).map((part, k) => { if (part === "") return null; if (/^\s+$/.test(part)) return part; if (by === "word") { return ( {part} ); } // Letter by letter: the letters of a word sit in one unbreakable group return ( {Array.from(part).map((ch, c) => ( {ch} ))} ); }); return ( {/* React 19 hoists this into once, no matter how many instances render */} {text} ); } const css = /* css */ ` .ui-trv { --ui-trv-blur: 8px; --ui-trv-rise: 0.35em; --ui-trv-ease: cubic-bezier(0.2, 0.7, 0.2, 1); } .ui-trv__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ui-trv__w { display: inline-block; white-space: nowrap; } .ui-trv__p { display: inline-block; opacity: 0; filter: blur(var(--ui-trv-blur)); transform: translateY(var(--ui-trv-rise)); will-change: opacity, filter, transform; } .ui-trv[data-shown] .ui-trv__p { animation: ui-trv-in var(--ui-trv-duration) var(--ui-trv-ease) both; animation-delay: calc(var(--ui-trv-delay) + var(--ui-trv-i) * var(--ui-trv-stagger)); } @keyframes ui-trv-in { from { opacity: 0; filter: blur(var(--ui-trv-blur)); transform: translateY(var(--ui-trv-rise)); } to { opacity: 1; filter: blur(0); transform: none; } } /* Reduced motion: the text is simply there */ @media (prefers-reduced-motion: reduce) { .ui-trv .ui-trv__p, .ui-trv[data-shown] .ui-trv__p { opacity: 1; filter: none; transform: none; animation: none; } } /* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. . The text takes its color from the parent, so only the blur softens a touch on dark backgrounds */ :where(.dark, [data-theme="dark"]) .ui-trv { --ui-trv-blur: 6px; } `; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L51",null,{"files":[{"path":"motion/text-reveal/text-reveal.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]