61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T1662,"use client"; import { motion, useReducedMotion, type Transition, type Variants } from "motion/react"; import { createContext, useContext, useState } from "react"; import { ease } from "@/lib/motion"; type Tag = "div" | "section" | "article" | "header" | "ul" | "ol" | "li" | "p" | "span" | "h1" | "h2" | "h3"; // Motion's own handlers share these names with different signatures. type Native = Omit< React.ComponentProps<"div">, "ref" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" >; export type BlurInProps = Native & { /** The element to render. */ as?: Tag; /** mount: as soon as it renders. inView: the first time it scrolls into view (at once if it already is). */ trigger?: "mount" | "inView"; /** With inView: play again each time it re-enters. Off by default; a reveal is for the first look. */ replay?: boolean; /** With inView: how much of it must be visible, 0–1. */ amount?: number; /** With inView: the scrolling element to watch instead of the window. */ root?: React.RefObject; /** Seconds before it starts, e.g. to follow something else in. */ delay?: number; /** Seconds the reveal takes. */ duration?: number; /** How far it rises, in px. */ y?: number; /** How much blur it clears, in px. Keep it small on large areas. */ blur?: number; /** * Reveal the BlurInItem children one after another instead of this element as a whole. * true staggers them 50ms apart; a number sets the gap in seconds. Capped after the eighth. */ stagger?: boolean | number; /** Called once the reveal has finished. */ onRevealed?: () => void; ref?: React.Ref; }; export type BlurInItemProps = Native & { as?: Tag; ref?: React.Ref }; type Shape = { y: number; blur: number; duration: number; reduce: boolean; settled: boolean }; const Ctx = createContext(null); // Hidden and shown are the same shape everywhere, so server and client render the // same first frame whatever the motion setting. Reduced motion only changes the // transition: the fade stays, rise and blur snap. The filter is removed when done, // because even blur(0px) traps position: fixed descendants. // Items leave delay out entirely: any delay of their own, even 0, overrides the stagger. function reveal({ y, blur, duration, reduce }: Omit, delay?: number): Variants { const wait = delay ? { delay: reduce ? Math.min(delay, 0.1) : delay } : {}; const transition: Transition = reduce ? { duration: 0.2, ease: ease.out, y: { duration: 0 }, filter: { duration: 0 }, ...wait } : { duration, ease: ease.out, ...wait }; return { hidden: { opacity: 0, y, filter: `blur(${blur}px)` }, shown: { opacity: 1, y: 0, filter: "blur(0px)", transition, transitionEnd: { filter: "none" } }, }; } // Stagger by position, but stop adding delay after the eighth item, so the tail of a // long list never arrives after someone has started reading. const capped = (gap: number, start: number) => (i: number) => start + Math.min(i, 7) * gap; export function BlurIn({ as = "div", trigger = "inView", replay = false, amount = 0.15, root, delay = 0, duration = 0.5, y = 8, blur = 4, stagger = false, onRevealed, className, children, ref, ...rest }: BlurInProps) { const reduce = !!useReducedMotion(); // Items that mount after the reveal (a list that grows) are simply there. const [settled, setSettled] = useState(false); const Comp = motion[as] as typeof motion.div; const staggered = stagger !== false; const gap = stagger === true ? 0.05 : typeof stagger === "number" ? stagger : 0; const variants: Variants = staggered ? { hidden: {}, shown: { transition: { delayChildren: reduce ? delay : capped(gap, delay) } } } : reveal({ y, blur, duration, reduce }, delay); const play = trigger === "mount" ? { animate: "shown" } : { whileInView: "shown", viewport: { once: !replay, amount, root } }; return ( } data-blur-in="" data-trigger={trigger} initial="hidden" {...play} variants={variants} onAnimationComplete={(name) => { if (name !== "shown") return; setSettled(true); onRevealed?.(); }} className={className} {...rest} > {children} {/* Without JavaScript nothing would ever reveal it, so it starts visible. */} ); } /** One piece of a staggered BlurIn. Outside one it renders as a plain element. */ export function BlurInItem({ as = "div", className, children, ref, ...rest }: BlurInItemProps) { const shape = useContext(Ctx); const Comp = motion[as] as typeof motion.div; if (!shape) { const Plain = as as "div"; return ( } className={className} {...(rest as React.ComponentProps<"div">)}> {children} ); } return ( } data-blur-in-item="" // No initial label of its own: that would detach it from the parent's variants. // It inherits "hidden" and plays "shown" when the parent does, on the stagger. initial={shape.settled ? false : undefined} variants={reveal(shape)} className={className} {...rest} > {children} ); } 60:["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@stealth","registryDependencies":["https://www.stealth.pm/r/tokens.json","https://www.stealth.pm/r/motion.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/ui/blur-in.tsx","content":"$63","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]