4f: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"] 50: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"] 51:T3775,"use client"; import { useCallback, useRef, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@/lib/utils"; import { UnlumenSlider } from "@/components/ui/unlumen-slider"; import { imageToMatrix } from "@/components/unlumen-ui/matrix-image"; import { type Frame, Matrix } from "@/components/unlumen-ui/matrix"; const DEFAULT_SIZE = 24; const MIN_SIZE = 16; const MAX_SIZE = 96; const MAX_CANVAS_PX = 360; const SHIMMER_FRAMES = 20; type Phase = "idle" | "loading" | "revealing" | "ambient"; function computeLayout( w: number, h: number, maxDim: number, ): { rows: number; cols: number } { const ratio = w / h; let cols: number, rows: number; if (ratio >= 1) { cols = maxDim; rows = Math.max(4, Math.round(maxDim / ratio)); } else { rows = maxDim; cols = Math.max(4, Math.round(maxDim * ratio)); } return { rows, cols }; } function computeSize(rows: number, cols: number): number { return Math.max(2, Math.floor(MAX_CANVAS_PX / Math.max(rows, cols)) - 1); } // Spinning loader at arbitrary size: dots orbit the center at radius ~40% of min dimension. function makeLoaderFrames( rows: number, cols: number, frameCount = 16, ): Frame[] { const cx = (cols - 1) / 2; const cy = (rows - 1) / 2; const radius = Math.min(rows, cols) * 0.38; const dotCount = 8; const tailLength = 6; return Array.from({ length: frameCount }, (_, f) => { const frame: Frame = Array.from({ length: rows }, () => Array.from({ length: cols }, () => 0), ); for (let i = 0; i < dotCount; i++) { const angle = (f / frameCount) * Math.PI * 2 + (i / dotCount) * Math.PI * 2; const x = Math.round(cx + Math.cos(angle) * radius); const y = Math.round(cy + Math.sin(angle) * radius); if (y >= 0 && y < rows && x >= 0 && x < cols) { const brightness = Math.max(0.15, 1 - i / tailLength); frame[y][x] = Math.max(frame[y][x], brightness); } } return frame; }); } // Morph loader → image: each frame gradually replaces loader pixels with image pixels. // Uses a random shuffle so pixels resolve in a scattered order, not row-by-row. function makeMorphFrames( loaderFrames: Frame[], target: Frame, rows: number, cols: number, steps = 24, ): Frame[] { // Build a shuffled list of all pixel positions const positions: [number, number][] = []; for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) positions.push([r, c]); // Fisher-Yates shuffle for (let i = positions.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [positions[i], positions[j]] = [positions[j], positions[i]]; } const pixelsPerStep = Math.ceil(positions.length / steps); const resolved = new Set(); return Array.from({ length: steps }, (_, step) => { const start = step * pixelsPerStep; const end = Math.min(start + pixelsPerStep, positions.length); for (let i = start; i < end; i++) { const [r, c] = positions[i]; resolved.add(r * cols + c); } const loaderF = loaderFrames[Math.round((step / steps) * (loaderFrames.length - 1))]; return Array.from({ length: rows }, (_, r) => Array.from({ length: cols }, (_, c) => resolved.has(r * cols + c) ? target[r][c] : loaderF[r][c], ), ); }); } function makeShimmerFrames( target: Frame, rows: number, cols: number, count = SHIMMER_FRAMES, ): Frame[] { return Array.from({ length: count }, () => Array.from({ length: rows }, (_, r) => Array.from({ length: cols }, (_, c) => { const v = target[r][c]; if (v < 0.55) return v; const delta = (Math.random() * 2 - 1) * 0.18; return Math.max(0, Math.min(1, v + delta)); }), ), ); } function loadImageElement(file: File): Promise { return new Promise((resolve, reject) => { const url = URL.createObjectURL(file); const img = new Image(); img.onload = () => { URL.revokeObjectURL(url); resolve(img); }; img.onerror = () => { URL.revokeObjectURL(url); reject(new Error("Failed to load image")); }; img.src = url; }); } export default function MatrixImageDemo() { const [phase, setPhase] = useState("idle"); const [loaderFrames, setLoaderFrames] = useState([]); const [revealFrames, setRevealFrames] = useState([]); const [shimmerFrames, setShimmerFrames] = useState([]); const [rows, setRows] = useState(DEFAULT_SIZE); const [cols, setCols] = useState(DEFAULT_SIZE); const [resolution, setResolution] = useState(DEFAULT_SIZE); const [inverted, setInverted] = useState(false); const [isDragging, setIsDragging] = useState(false); const [fileName, setFileName] = useState(null); const fileRef = useRef(null); const imageRef = useRef(null); const targetFrameRef = useRef(null); const currentRowsRef = useRef(DEFAULT_SIZE); const currentColsRef = useRef(DEFAULT_SIZE); const inputRef = useRef(null); const processFile = useCallback( async (file: File, res: number, inv: boolean) => { fileRef.current = file; setFileName(file.name); setLoaderFrames(makeLoaderFrames(res, res)); setPhase("loading"); const [img] = (await Promise.all([ loadImageElement(file), new Promise((resolve) => setTimeout(resolve, 600)), ])) as [HTMLImageElement, void]; imageRef.current = img; const layout = computeLayout(img.naturalWidth, img.naturalHeight, res); const r = layout.rows; const c = layout.cols; setRows(r); setCols(c); currentRowsRef.current = r; currentColsRef.current = c; const lf = makeLoaderFrames(r, c); setLoaderFrames(lf); const target = imageToMatrix(img, r, c, inv); targetFrameRef.current = target; const morph = makeMorphFrames(lf, target, r, c); setRevealFrames(morph); setPhase("revealing"); }, [], ); const handleRevealFrame = useCallback( (index: number) => { if (index === revealFrames.length - 1) { const target = targetFrameRef.current; if (!target) return; const r = currentRowsRef.current; const c = currentColsRef.current; const shimmer = makeShimmerFrames(target, r, c); setTimeout(() => { setShimmerFrames(shimmer); setPhase("ambient"); }, 0); } }, [revealFrames.length], ); const handleFile = useCallback( (file: File) => { if (!file.type.startsWith("image/")) return; processFile(file, resolution, inverted); }, [processFile, resolution, inverted], ); const handleResolution = useCallback( (value: number) => { setResolution(value); if (!fileRef.current || !imageRef.current) return; const layout = computeLayout( imageRef.current.naturalWidth, imageRef.current.naturalHeight, value, ); const r = layout.rows; const c = layout.cols; setRows(r); setCols(c); currentRowsRef.current = r; currentColsRef.current = c; const target = imageToMatrix(imageRef.current, r, c, inverted); targetFrameRef.current = target; setShimmerFrames(makeShimmerFrames(target, r, c)); setPhase("ambient"); }, [inverted], ); const handleInvert = useCallback(() => { const next = !inverted; setInverted(next); if (!imageRef.current) return; const r = currentRowsRef.current; const c = currentColsRef.current; const lf = makeLoaderFrames(r, c); setLoaderFrames(lf); const target = imageToMatrix(imageRef.current, r, c, next); targetFrameRef.current = target; const morph = makeMorphFrames(lf, target, r, c); setRevealFrames(morph); setPhase("revealing"); }, [inverted]); const handleReset = useCallback(() => { setPhase("idle"); setFileName(null); setInverted(false); setResolution(DEFAULT_SIZE); fileRef.current = null; imageRef.current = null; targetFrameRef.current = null; }, []); const handleDrop = useCallback( (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); const file = e.dataTransfer.files[0]; if (file) handleFile(file); }, [handleFile], ); const size = computeSize(rows, cols); return (

{phase === "idle" && ( )} {phase !== "idle" && ( {phase === "loading" && loaderFrames.length > 0 && ( )} {phase === "revealing" && revealFrames.length > 0 && ( )} {phase === "ambient" && shimmerFrames.length > 0 && ( )} {phase !== "loading" && (

{fileName && ( {fileName} )}

handleResolution(v as number)} min={MIN_SIZE} max={MAX_SIZE} step={1} label="res" valuePosition="right" formatValue={() => `${cols} × ${rows}`} />

)} )} { const file = e.target.files?.[0]; if (file) handleFile(file); e.target.value = ""; }} />

); } 4e:["$","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,["$","$L4f",null,{"namespace":"@unlumen-ui","registryDependencies":["@unlumen-ui/matrix-image"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/demo/components/unlumen/matrix-image/index.tsx","content":"$51","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]