Dynamic Grid

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6export interface DynamicGridProps {
7  cellSize?: number;
8  lineColor?: string;
9  background?: string;
10  speed?: number;
11  direction?: "diagonal" | "horizontal" | "vertical";
12  fps?: number;
13  durationInFrames?: number;
14  width?: number;
15  height?: number;
16  className?: string;
17}
18 
19const getGridAnimation = (dir: string, offset: number): string => {
20  if (dir === "diagonal") {
21    return `framecn-grid-scroll ${offset}ms linear infinite`;
22  }
23  if (dir === "horizontal") {
24    return `framecn-grid-scroll-x ${offset}ms linear infinite`;
25  }
26  return `framecn-grid-scroll-y ${offset}ms linear infinite`;
27};
28 
29export const DynamicGrid = ({
30  cellSize = 40,
31  lineColor = "#27272a",
32  background = "#0a0a0a",
33  speed = 0.5,
34  direction = "diagonal",
35  fps = 30,
36  durationInFrames = 150,
37  width = 1280,
38  height = 720,
39  className,
40}: DynamicGridProps) => {
41  const safeSpeed = Math.max(0.01, speed);
42  const durationMs = (durationInFrames / fps) * 1000;
43  const offsetMs = ((cellSize / fps) * 1000) / safeSpeed;
44 
45  const containerStyle: CSSProperties = {
46    background,
47    height,
48    overflow: "hidden",
49    position: "relative",
50    width,
51  };
52 
53  return (
54    <Timegroup
55      className={className}
56      duration={`${durationMs}ms`}
57      mode="fixed"
58      style={containerStyle}
59    >
60      <>
61        <style>{`
62          @keyframes framecn-grid-scroll {
63            from { transform: translate(0, 0); }
64            to { transform: translate(${cellSize}px, ${cellSize}px); }
65          }
66          @keyframes framecn-grid-scroll-x {
67            from { transform: translate(0, 0); }
68            to { transform: translate(${cellSize}px, 0); }
69          }
70          @keyframes framecn-grid-scroll-y {
71            from { transform: translate(0, 0); }
72            to { transform: translate(0, ${cellSize}px); }
73          }
74        `}</style>
75        <div
76          style={{
77            animation: getGridAnimation(direction, offsetMs),
78            backgroundImage: `
79              linear-gradient(to right, ${lineColor} 1px, transparent 1px),
80              linear-gradient(to bottom, ${lineColor} 1px, transparent 1px)
81            `,
82            backgroundSize: `${cellSize}px ${cellSize}px`,
83            inset: `-${cellSize}px`,
84            position: "absolute",
85            willChange: "transform",
86          }}
87        />
88      </>
89    </Timegroup>
90  );
91};