matrix

1"use client"
2 
3import * as React from "react"
4import { useEffect, useMemo, useRef, useState } from "react"
5 
6import { cn } from "@/lib/utils"
7 
8export type Frame = number[][]
9type MatrixMode = "default" | "vu"
10 
11interface CellPosition {
12  x: number
13  y: number
14}
15 
16interface MatrixProps extends React.HTMLAttributes<HTMLDivElement> {
17  rows: number
18  cols: number
19  pattern?: Frame
20  frames?: Frame[]
21  fps?: number
22  autoplay?: boolean
23  loop?: boolean
24  size?: number
25  gap?: number
26  palette?: {
27    on: string
28    off: string
29  }
30  brightness?: number
31  ariaLabel?: string
32  onFrame?: (index: number) => void
33  mode?: MatrixMode
34  levels?: number[]
35}
36 
37function clamp(value: number): number {
38  return Math.max(0, Math.min(1, value))
39}
40 
41function ensureFrameSize(frame: Frame, rows: number, cols: number): Frame {
42  const result: Frame = []
43  for (let r = 0; r < rows; r++) {
44    const row = frame[r] || []
45    result.push([])
46    for (let c = 0; c < cols; c++) {
47      result[r][c] = row[c] ?? 0
48    }
49  }
50  return result
51}
52 
53function useAnimation(
54  frames: Frame[] | undefined,
55  options: {
56    fps: number
57    autoplay: boolean
58    loop: boolean
59    onFrame?: (index: number) => void
60  }
61): { frameIndex: number; isPlaying: boolean } {
62  const [frameIndex, setFrameIndex] = useState(0)
63  const [isPlaying, setIsPlaying] = useState(options.autoplay)
64  const frameIdRef = useRef<number | undefined>(undefined)
65  const lastTimeRef = useRef<number>(0)
66  const accumulatorRef = useRef<number>(0)
67 
68  useEffect(() => {
69    if (!frames || frames.length === 0 || !isPlaying) {
70      return
71    }
72 
73    const frameInterval = 1000 / options.fps
74 
75    const animate = (currentTime: number) => {
76      if (lastTimeRef.current === 0) {
77        lastTimeRef.current = currentTime
78      }
79 
80      const deltaTime = currentTime - lastTimeRef.current
81      lastTimeRef.current = currentTime
82      accumulatorRef.current += deltaTime
83 
84      if (accumulatorRef.current >= frameInterval) {
85        accumulatorRef.current -= frameInterval
86 
87        setFrameIndex((prev) => {
88          const next = prev + 1
89          if (next >= frames.length) {
90            if (options.loop) {
91              options.onFrame?.(0)
92              return 0
93            } else {
94              setIsPlaying(false)
95              return prev
96            }
97          }
98          options.onFrame?.(next)
99          return next
100        })
101      }
102 
103      frameIdRef.current = requestAnimationFrame(animate)
104    }
105 
106// … truncated