52: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"] 53:T1614,"use client"; import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react"; /* * Grid Background – a fine line grid behind your content, in a single self-contained file. * The grid drifts slowly by one cell per loop and fades out towards the edges through a radial mask. * On first view it can be uncovered by a circle that grows from the center. * Reduced motion: the grid stays still and appears without the reveal. */ export type GridDirection = "up" | "down" | "left" | "right" | "diagonal"; export type GridBackgroundProps = { /** Content rendered above the grid */ children?: ReactNode; /** Cell size in px */ size?: number; /** Line color – defaults to a faint black, or a faint white in dark mode */ color?: string; /** Seconds per cell; 0 keeps the grid still */ speed?: number; /** Drift direction; "diagonal" runs from top right to bottom left */ direction?: GridDirection; /** Uncover the grid with a growing circle when it first comes into view */ reveal?: boolean; /** Radius of the edge fade, in % of the distance to the corners */ fade?: number; className?: string; }; const offsets: Record = { up: [0, -1], down: [0, 1], left: [-1, 0], right: [1, 0], diagonal: [-1, 1], }; export function GridBackground({ children, size = 48, color, speed = 3, direction = "diagonal", reveal = true, fade = 70, className, }: GridBackgroundProps) { const ref = useRef(null); const [shown, setShown] = useState(!reveal); // Reveal once the grid scrolls into view (right away with reduced motion or without IntersectionObserver) useEffect(() => { if (!reveal) return setShown(true); const el = ref.current; if (!el || typeof IntersectionObserver === "undefined" || window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setShown(true); return; } const io = new IntersectionObserver( (entries) => { if (entries.some((e) => e.isIntersecting)) { setShown(true); io.disconnect(); } }, { threshold: 0.2 }, ); io.observe(el); return () => io.disconnect(); }, [reveal]); const [dx, dy] = offsets[direction] ?? offsets.diagonal; const style = { "--ui-gb-size": `${size}px`, "--ui-gb-dx": `${dx * size}px`, "--ui-gb-dy": `${dy * size}px`, "--ui-gb-speed": `${Math.max(speed, 0)}s`, "--ui-gb-fade": `${fade}%`, ...(color ? { "--ui-gb-line": color } : {}), } as CSSProperties; return (

0 ? undefined : ""} > {/* React 19 hoists this into once, no matter how many instances render */} ); } const css = /* css */ ` @property --ui-gb-r { syntax: ""; inherits: false; initial-value: 0%; } .ui-gb { --ui-gb-color: rgba(0, 0, 0, 0.07); --ui-gb-ease: cubic-bezier(0.22, 1, 0.36, 1); position: relative; isolation: isolate; overflow: hidden; } /* Edge fade: a still radial mask, so the drifting lines dissolve towards the sides */ .ui-gb-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent var(--ui-gb-fade)); mask-image: radial-gradient(ellipse at center, #000 20%, transparent var(--ui-gb-fade)); } /* Reveal: a circle from the center grows until it reaches the corners */ .ui-gb-reveal { position: absolute; inset: 0; overflow: hidden; } .ui-gb[data-reveal] .ui-gb-reveal { --ui-gb-r: 0%; -webkit-mask-image: radial-gradient(circle farthest-corner at center, #000 var(--ui-gb-r), transparent calc(var(--ui-gb-r) + 12%)); mask-image: radial-gradient(circle farthest-corner at center, #000 var(--ui-gb-r), transparent calc(var(--ui-gb-r) + 12%)); } .ui-gb[data-reveal][data-shown] .ui-gb-reveal { animation: ui-gb-reveal 1.6s var(--ui-gb-ease) forwards; } /* The lines: one cell larger on every side, so a shift by one cell loops seamlessly */ .ui-gb-lines { position: absolute; inset: calc(var(--ui-gb-size) * -1); background-image: linear-gradient(to right, var(--ui-gb-line, var(--ui-gb-color)) 1px, transparent 1px), linear-gradient(to bottom, var(--ui-gb-line, var(--ui-gb-color)) 1px, transparent 1px); background-size: var(--ui-gb-size) var(--ui-gb-size); animation: ui-gb-drift var(--ui-gb-speed) linear infinite; } .ui-gb[data-static] .ui-gb-lines { animation: none; } .ui-gb-content { position: relative; z-index: 1; height: 100%; } @keyframes ui-gb-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--ui-gb-dx), var(--ui-gb-dy), 0); } } @keyframes ui-gb-reveal { from { --ui-gb-r: 0%; } to { --ui-gb-r: 100%; } } @media (prefers-reduced-motion: reduce) { .ui-gb-lines { animation: none; } .ui-gb[data-reveal] .ui-gb-reveal { -webkit-mask-image: none; mask-image: none; animation: none; } } /* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. */ :where(.dark, [data-theme="dark"]) .ui-gb { --ui-gb-color: rgba(255, 255, 255, 0.07); } `; 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"motion/grid-background/grid-background.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]