Dynamic Grid · remocn

A minimal grid background built from two CSS linear gradients, translated each frame via transform. Cheaper than animating background-position because the browser keeps layout untouched.

Installation

$ pnpm dlx shadcn@latest add @remocn/dynamic-grid

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { DynamicGrid } from "@/components/remocn/dynamic-grid";

const DynamicGridScene = () => (
  <DynamicGrid
    cellSize={40}
    lineColor="#27272a"
    background="#0a0a0a"
    speed={0.5}
    direction="diagonal"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="DynamicGrid"
    component={DynamicGridScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`cellSize`	`number`	`40`	Grid cell size in pixels.
`lineColor`	`string`	`"#27272a"`	Grid line color.
`background`	`string`	`"#0a0a0a"`	Base background color behind the grid.
`speed`	`number`	`0.5`	Pixels moved per frame. Motion wraps at cellSize to loop seamlessly.
`direction`	`"diagonal" \| "horizontal" \| "vertical"`	`"diagonal"`	Direction the grid drifts.
`className`	`string`	—	Optional className passed to the outer container.

Notes

Seamless loop

Offset uses modulo cellSize, so the grid loops perfectly — ideal as a base layer under intros and outros.