52: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"] 53: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"] 54:Te2e,"use client"; import { useEffect, useRef, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export interface PixelTransitionProps { /** Face shown at rest. */ children: ReactNode; /** Face revealed on hover, focus or tap. */ back: ReactNode; /** Pixels per row and column. */ gridSize?: number; pixelColor?: string; /** Total ms for cover + reveal. */ duration?: number; /** Accessible label for the card. */ label?: string; className?: string; } const shuffle = (n: number) => { const a = Array.from({ length: n }, (_, i) => i); for (let i = n - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; }; export function PixelTransition({ children, back, gridSize = 12, pixelColor = "#c6ff3d", duration = 700, label = "Flip card", className, }: PixelTransitionProps) { const grid = useRef(null); const front = useRef(null); const rear = useRef(null); const timer = useRef>(undefined); const showing = useRef(false); useEffect(() => () => clearTimeout(timer.current), []); const swapFaces = (toBack: boolean) => { front.current!.style.visibility = toBack ? "hidden" : "visible"; rear.current!.style.visibility = toBack ? "visible" : "hidden"; }; const run = (toBack: boolean) => { if (showing.current === toBack) return; showing.current = toBack; clearTimeout(timer.current); if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return swapFaces(toBack); const pixels = Array.from(grid.current!.children) as HTMLElement[]; const half = duration / 2; // Each pixel pops in at a random step, the face swaps under full cover, then pixels pop out in a new order. shuffle(pixels.length).forEach((rank, i) => { pixels[i].style.transitionDelay = `${(rank / pixels.length) * half}ms`; pixels[i].style.opacity = "1"; }); timer.current = setTimeout(() => { swapFaces(toBack); shuffle(pixels.length).forEach((rank, i) => { pixels[i].style.transitionDelay = `${(rank / pixels.length) * half}ms`; pixels[i].style.opacity = "0"; }); }, half); }; return (

e.pointerType === "mouse" && run(true)} onPointerLeave={(e) => e.pointerType === "mouse" && run(false)} onClick={() => run(!showing.current)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); run(!showing.current); } }} >

{children}

{back}

{Array.from({ length: gridSize * gridSize }, (_, i) => ( // Slight overdraw hides hairline seams between neighbouring pixels. ))}

); } 51:["$","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":[null,["$","$L52",null,{"namespace":"@glint-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/ui/pixel-transition.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]