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:T38af,"use client" import * as React from "react" import { useEffect, useMemo, useRef, useState } from "react" import { cn } from "@/lib/utils" export type Frame = number[][] type MatrixMode = "default" | "vu" interface CellPosition { x: number y: number } interface MatrixProps extends React.HTMLAttributes { rows: number cols: number pattern?: Frame frames?: Frame[] fps?: number autoplay?: boolean loop?: boolean size?: number gap?: number palette?: { on: string off: string } brightness?: number ariaLabel?: string onFrame?: (index: number) => void mode?: MatrixMode levels?: number[] } function clamp(value: number): number { return Math.max(0, Math.min(1, value)) } function ensureFrameSize(frame: Frame, rows: number, cols: number): Frame { const result: Frame = [] for (let r = 0; r < rows; r++) { const row = frame[r] || [] result.push([]) for (let c = 0; c < cols; c++) { result[r][c] = row[c] ?? 0 } } return result } function useAnimation( frames: Frame[] | undefined, options: { fps: number autoplay: boolean loop: boolean onFrame?: (index: number) => void } ): { frameIndex: number; isPlaying: boolean } { const [frameIndex, setFrameIndex] = useState(0) const [isPlaying, setIsPlaying] = useState(options.autoplay) const frameIdRef = useRef(undefined) const lastTimeRef = useRef(0) const accumulatorRef = useRef(0) useEffect(() => { if (!frames || frames.length === 0 || !isPlaying) { return } const frameInterval = 1000 / options.fps const animate = (currentTime: number) => { if (lastTimeRef.current === 0) { lastTimeRef.current = currentTime } const deltaTime = currentTime - lastTimeRef.current lastTimeRef.current = currentTime accumulatorRef.current += deltaTime if (accumulatorRef.current >= frameInterval) { accumulatorRef.current -= frameInterval setFrameIndex((prev) => { const next = prev + 1 if (next >= frames.length) { if (options.loop) { options.onFrame?.(0) return 0 } else { setIsPlaying(false) return prev } } options.onFrame?.(next) return next }) } frameIdRef.current = requestAnimationFrame(animate) } frameIdRef.current = requestAnimationFrame(animate) return () => { if (frameIdRef.current) { cancelAnimationFrame(frameIdRef.current) } } }, [frames, isPlaying, options.fps, options.loop, options.onFrame]) useEffect(() => { setFrameIndex(0) setIsPlaying(options.autoplay) lastTimeRef.current = 0 accumulatorRef.current = 0 }, [frames, options.autoplay]) return { frameIndex, isPlaying } } function emptyFrame(rows: number, cols: number): Frame { return Array.from({ length: rows }, () => Array(cols).fill(0)) } function setPixel(frame: Frame, row: number, col: number, value: number): void { if (row >= 0 && row < frame.length && col >= 0 && col < frame[0].length) { frame[row][col] = value } } export const digits: Frame[] = [ [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], ], [ [0, 0, 1, 0, 0], [0, 1, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 1, 1, 1, 0], ], [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [0, 0, 0, 0, 1], [0, 0, 0, 1, 0], [0, 0, 1, 0, 0], [0, 1, 0, 0, 0], [1, 1, 1, 1, 1], ], [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [0, 0, 0, 0, 1], [0, 0, 1, 1, 0], [0, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], ], [ [0, 0, 0, 1, 0], [0, 0, 1, 1, 0], [0, 1, 0, 1, 0], [1, 0, 0, 1, 0], [1, 1, 1, 1, 1], [0, 0, 0, 1, 0], [0, 0, 0, 1, 0], ], [ [1, 1, 1, 1, 1], [1, 0, 0, 0, 0], [1, 1, 1, 1, 0], [0, 0, 0, 0, 1], [0, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], ], [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 0], [1, 0, 0, 0, 0], [1, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], ], [ [1, 1, 1, 1, 1], [0, 0, 0, 0, 1], [0, 0, 0, 1, 0], [0, 0, 1, 0, 0], [0, 1, 0, 0, 0], [0, 1, 0, 0, 0], [0, 1, 0, 0, 0], ], [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 0], ], [ [0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 1, 1, 1], [0, 0, 0, 0, 1], [0, 0, 0, 0, 1], [0, 1, 1, 1, 0], ], ] export const chevronLeft: Frame = [ [0, 0, 0, 1, 0], [0, 0, 1, 0, 0], [0, 1, 0, 0, 0], [0, 0, 1, 0, 0], [0, 0, 0, 1, 0], ] export const chevronRight: Frame = [ [0, 1, 0, 0, 0], [0, 0, 1, 0, 0], [0, 0, 0, 1, 0], [0, 0, 1, 0, 0], [0, 1, 0, 0, 0], ] export const loader: Frame[] = (() => { const frames: Frame[] = [] const size = 7 const center = 3 const radius = 2.5 for (let frame = 0; frame < 12; frame++) { const f = emptyFrame(size, size) for (let i = 0; i < 8; i++) { const angle = (frame / 12) * Math.PI * 2 + (i / 8) * Math.PI * 2 const x = Math.round(center + Math.cos(angle) * radius) const y = Math.round(center + Math.sin(angle) * radius) const brightness = 1 - i / 10 setPixel(f, y, x, Math.max(0.2, brightness)) } frames.push(f) } return frames })() export const pulse: Frame[] = (() => { const frames: Frame[] = [] const size = 7 const center = 3 for (let frame = 0; frame < 16; frame++) { const f = emptyFrame(size, size) const phase = (frame / 16) * Math.PI * 2 const intensity = (Math.sin(phase) + 1) / 2 setPixel(f, center, center, 1) const radius = Math.floor((1 - intensity) * 3) + 1 for (let dy = -radius; dy <= radius; dy++) { for (let dx = -radius; dx <= radius; dx++) { const dist = Math.sqrt(dx * dx + dy * dy) if (Math.abs(dist - radius) < 0.7) { setPixel(f, center + dy, center + dx, intensity * 0.6) } } } frames.push(f) } return frames })() export function vu(columns: number, levels: number[]): Frame { const rows = 7 const frame = emptyFrame(rows, columns) for (let col = 0; col < Math.min(columns, levels.length); col++) { const level = Math.max(0, Math.min(1, levels[col])) const height = Math.floor(level * rows) for (let row = 0; row < rows; row++) { const rowFromBottom = rows - 1 - row if (rowFromBottom < height) { let brightness = 1 if (row < rows * 0.3) { brightness = 1 } else if (row < rows * 0.6) { brightness = 0.8 } else { brightness = 0.6 } frame[row][col] = brightness } } } return frame } export const wave: Frame[] = (() => { const frames: Frame[] = [] const rows = 7 const cols = 7 for (let frame = 0; frame < 24; frame++) { const f = emptyFrame(rows, cols) const phase = (frame / 24) * Math.PI * 2 for (let col = 0; col < cols; col++) { const colPhase = (col / cols) * Math.PI * 2 const height = Math.sin(phase + colPhase) * 2.5 + 3.5 const row = Math.floor(height) if (row >= 0 && row < rows) { setPixel(f, row, col, 1) const frac = height - row if (row > 0) setPixel(f, row - 1, col, 1 - frac) if (row < rows - 1) setPixel(f, row + 1, col, frac) } } frames.push(f) } return frames })() export const snake: Frame[] = (() => { const frames: Frame[] = [] const rows = 7 const cols = 7 const path: Array<[number, number]> = [] let x = 0 let y = 0 let dx = 1 let dy = 0 const visited = new Set() while (path.length < rows * cols) { path.push([y, x]) visited.add(`${y},${x}`) const nextX = x + dx const nextY = y + dy if ( nextX >= 0 && nextX < cols && nextY >= 0 && nextY < rows && !visited.has(`${nextY},${nextX}`) ) { x = nextX y = nextY } else { const newDx = -dy const newDy = dx dx = newDx dy = newDy const nextX = x + dx const nextY = y + dy if ( nextX >= 0 && nextX < cols && nextY >= 0 && nextY < rows && !visited.has(`${nextY},${nextX}`) ) { x = nextX y = nextY } else { break } } } const snakeLength = 5 for (let frame = 0; frame < path.length; frame++) { const f = emptyFrame(rows, cols) for (let i = 0; i < snakeLength; i++) { const idx = frame - i if (idx >= 0 && idx < path.length) { const [y, x] = path[idx] const brightness = 1 - i / snakeLength setPixel(f, y, x, brightness) } } frames.push(f) } return frames })() export const Matrix = React.forwardRef( ( { rows, cols, pattern, frames, fps = 12, autoplay = true, loop = true, size = 10, gap = 2, palette = { on: "currentColor", off: "var(--muted-foreground)", }, brightness = 1, ariaLabel, onFrame, mode = "default", levels, className, ...props }, ref ) => { const { frameIndex } = useAnimation(frames, { fps, autoplay: autoplay && !pattern, loop, onFrame, }) const currentFrame = useMemo(() => { if (mode === "vu" && levels && levels.length > 0) { return ensureFrameSize(vu(cols, levels), rows, cols) } if (pattern) { return ensureFrameSize(pattern, rows, cols) } if (frames && frames.length > 0) { return ensureFrameSize(frames[frameIndex] || frames[0], rows, cols) } return ensureFrameSize([], rows, cols) }, [pattern, frames, frameIndex, rows, cols, mode, levels]) const cellPositions = useMemo(() => { const positions: CellPosition[][] = [] for (let row = 0; row < rows; row++) { positions[row] = [] for (let col = 0; col < cols; col++) { positions[row][col] = { x: col * (size + gap), y: row * (size + gap), } } } return positions }, [rows, cols, size, gap]) const svgDimensions = useMemo(() => { return { width: cols * (size + gap) - gap, height: rows * (size + gap) - gap, } }, [rows, cols, size, gap]) const isAnimating = !pattern && frames && frames.length > 0 return (

) } ) Matrix.displayName = "Matrix" 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"components/ui/matrix.tsx","content":"$51","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]