4e: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"] 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/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"] 50:T146e,// Text Reveal from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { animate, stagger as staggerDelay, useReducedMotion } from 'motion/react'; import { cn } from '@/lib/utils'; export type TextRevealBy = 'word' | 'char' | 'line'; export interface TextRevealProps extends Omit, 'children' | 'ref'> { children: string; ref?: React.Ref; /** Element to render the text as. */ as?: React.ElementType; /** Split granularity for the staggered reveal. */ by?: TextRevealBy; /** Delay before the first unit reveals, in ms. */ delay?: number; /** Per-unit reveal duration, in ms. */ duration?: number; /** Delay added between units, in ms. */ stagger?: number; /** Reveal once and stay, or replay every time it re-enters the viewport. */ once?: boolean; /** Visible fraction (0–1) that triggers the reveal. */ amount?: number; } const EASE: [number, number, number, number] = [0.22, 1, 0.36, 1]; const UNIT = '[data-slot=text-reveal-unit] > span'; type RevealHandler = (inView: boolean) => void; interface RevealObserver { observer: IntersectionObserver; handlers: Map; } // One observer per threshold, shared by every instance on the page. const observers = new Map(); const observeReveal = (node: Element, amount: number, handler: RevealHandler) => { let entry = observers.get(amount); if (!entry) { const handlers = new Map(); const observer = new IntersectionObserver( (records) => { for (const record of records) { // An element taller than viewport / amount can never reach the ratio, so it reveals on entry. const viewport = record.rootBounds?.height ?? window.innerHeight; const canReachAmount = record.boundingClientRect.height * amount <= viewport; if (record.isIntersecting && (record.intersectionRatio >= amount || !canReachAmount)) { handlers.get(record.target)?.(true); } else if (!record.isIntersecting) handlers.get(record.target)?.(false); } }, { threshold: [0, amount] }, ); entry = { observer, handlers }; observers.set(amount, entry); } const { observer, handlers } = entry; handlers.set(node, handler); observer.observe(node); return () => { if (!handlers.delete(node)) return; observer.unobserve(node); if (handlers.size === 0) { observer.disconnect(); observers.delete(amount); } }; }; /** * Server HTML stays visible, so nothing waits on hydration. Once mounted, text that is off * screen is hidden and motion reveals it on arrival; text already in view is left alone. */ const TextReveal = ({ children, as, by = 'word', delay = 0, duration = 600, stagger = 60, once = true, amount = 0.3, className, ref, ...props }: TextRevealProps) => { const nodeRef = React.useRef(null); const reduced = useReducedMotion(); React.useImperativeHandle(ref, () => nodeRef.current as HTMLElement); const Tag = as ?? 'p'; // A callback ref, not an effect: observation starts when the node attaches and stops when it // detaches. It watches the container because each unit starts clipped by its mask. const revealRef = React.useCallback( (node: HTMLElement | null) => { nodeRef.current = node; if (!node || reduced) return; let isHidden = false; const stop = observeReveal(node, amount, (inView) => { const units = node.querySelectorAll(UNIT); if (!inView) { if (isHidden) return; isHidden = true; animate(units, { y: '120%', opacity: 0 }, { duration: 0 }); return; } if (isHidden) { isHidden = false; animate( units, { y: 0, opacity: 1 }, { duration: duration / 1000, delay: staggerDelay(stagger / 1000, { startDelay: delay / 1000 }), ease: EASE, }, ); } if (once) stop(); }); return stop; }, [reduced, amount, once, duration, delay, stagger], ); const units = by === 'char' ? Array.from(children) : by === 'line' ? children.split('\n') : children.split(' '); return ( {/* The split units are decorative, and a role-less element ignores aria-label. */} {children} {units.map((unit, i) => ( {unit === '' ? ' ' : unit} {by === 'word' && i < units.length - 1 ? ' ' : null} ))} ); }; export { TextReveal }; 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hirael","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/hirael/bases/radix/components/text-reveal.tsx","content":"$50","type":"registry:component","target":"components/text-reveal.tsx"}],"className":"h-[70svh] min-h-80"}]]}]