Grid Pixelate Wipe

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties, ReactElement } from "react";
5 
6const FONT_FAMILY =
7  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
8 
9const DefaultPanel = ({ label, color }: { label: string; color: string }) => (
10  <div
11    style={{
12      alignItems: "center",
13      background: color,
14      color: "white",
15      display: "flex",
16      fontFamily: FONT_FAMILY,
17      fontSize: 96,
18      fontWeight: 700,
19      inset: 0,
20      justifyContent: "center",
21      letterSpacing: "-0.05em",
22      position: "absolute",
23    }}
24  >
25    {label}
26  </div>
27);
28 
29export interface GridPixelateWipeProps {
30  from?: React.ReactNode;
31  to?: React.ReactNode;
32  cols?: number;
33  rows?: number;
34  pattern?: "wave" | "diagonal" | "spiral";
35  transitionStart?: number;
36  transitionDuration?: number;
37  cellFadeFrames?: number;
38  speed?: number;
39  fps?: number;
40  durationInFrames?: number;
41  width?: number;
42  height?: number;
43  background?: string;
44  className?: string;
45}
46 
47const computeDelays = (
48  cols: number,
49  rows: number,
50  pattern: string,
51  transitionDuration: number,
52  cellFadeFrames: number
53) => {
54  const raw: number[][] = Array.from({ length: rows }, () =>
55    Array.from({ length: cols }, () => 0)
56  );
57  let max = -Infinity;
58  let min = Infinity;
59 
60  if (pattern === "spiral") {
61    let bottom = rows - 1;
62    let i = 0;
63    let left = 0;
64    let right = cols - 1;
65    let top = 0;
66    while (top <= bottom && left <= right) {
67      for (let x = left; x <= right; x += 1) {
68        raw[top][x] = i;
69        i += 1;
70      }
71      top += 1;
72      for (let y = top; y <= bottom; y += 1) {
73        raw[y][right] = i;
74        i += 1;
75      }
76      right -= 1;
77      if (top <= bottom) {
78        for (let x = right; x >= left; x -= 1) {
79          raw[bottom][x] = i;
80          i += 1;
81        }
82        bottom -= 1;
83      }
84      if (left <= right) {
85        for (let y = bottom; y >= top; y -= 1) {
86          raw[y][left] = i;
87          i += 1;
88        }
89        left -= 1;
90      }
91    }
92  } else {
93    for (let y = 0; y < rows; y += 1) {
94      for (let x = 0; x < cols; x += 1) {
95        raw[y][x] =
96          pattern === "wave"
97            ? Math.hypot(x - (cols - 1) / 2, y - (rows - 1) / 2)
98            : x + y;
99      }
100    }
101  }
102 
103  for (let y = 0; y < rows; y += 1) {
104    for (let x = 0; x < cols; x += 1) {
105      if (raw[y][x] < min) {
106        min = raw[y][x];
107      }
108      if (raw[y][x] > max) {
109        max = raw[y][x];
110// … truncated