dynamic-grid

1import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
2import { EASING } from "@/remotion/lib/motion-tokens";
3 
4export type DynamicGridProps = {
5  backgroundColor?: string;
6  lineColor?: string;
7  sweepColor?: string;
8  spacing?: number;
9  speed?: number;
10  sweepDurationInFrames?: number;
11};
12 
13export const DynamicGrid: React.FC<DynamicGridProps> = ({
14  backgroundColor = "#080810",
15  lineColor = "rgba(255,255,255,0.1)",
16  sweepColor = "rgba(232,184,109,0.55)",
17  spacing = 64,
18  speed = 0.4,
19  sweepDurationInFrames = 150,
20}) => {
21  const frame = useCurrentFrame();
22  const { width, height } = useVideoConfig();
23 
24  // Wraps every `spacing` px, so the pattern re-aligns with itself on wrap —
25  // a hard modulo on frame instead would snap the drift back to zero.
26  const driftPx = ((frame * speed) % spacing + spacing) % spacing;
27 
28  const sweepT = interpolate(frame % sweepDurationInFrames, [0, sweepDurationInFrames], [0, 1], {
29    easing: EASING.editorial,
30    extrapolateLeft: "clamp",
31    extrapolateRight: "clamp",
32  });
33  const diag = width + height;
34  const sweepOffset = interpolate(sweepT, [0, 1], [-diag * 0.3, diag * 0.5]);
35 
36  return (
37    <AbsoluteFill style={{ background: backgroundColor, overflow: "hidden" }}>
38      <AbsoluteFill
39        style={{
40          backgroundImage: `linear-gradient(${lineColor} 1px, transparent 1px), linear-gradient(90deg, ${lineColor} 1px, transparent 1px)`,
41          backgroundSize: `${spacing}px ${spacing}px`,
42          backgroundPosition: `${driftPx}px ${driftPx}px`,
43        }}
44      />
45      <div
46        style={{
47          position: "absolute",
48          top: -height * 0.5,
49          left: -width * 0.2,
50          width: 260,
51          height: height * 2,
52          transform: `translateX(${sweepOffset}px) rotate(18deg)`,
53          background: `linear-gradient(90deg, transparent, ${sweepColor}, transparent)`,
54          filter: "blur(40px)",
55          mixBlendMode: "screen",
56        }}
57      />
58      <AbsoluteFill
59        style={{
60          background: "radial-gradient(circle at 50% 50%, transparent 35%, rgba(0,0,0,0.6) 100%)",
61          pointerEvents: "none",
62        }}
63      />
64    </AbsoluteFill>
65  );
66};