Dynamic Grid
Subtle drifting dot and line grid background.
PrimitivePrimitivesAdvanced
dynamic-grid30fps · 960×540
Install
$ npx remotion-ui@latest add dynamic-gridLayer a slow-moving dot grid and faint line grid for depth behind scene content.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/dynamic-grid- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: spacing, lineColor, sweepColor, speed, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { DynamicGrid } from "@/remotion/primitives/dynamic-grid";
<DynamicGrid spacing={64} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| spacing | number | 64 | Grid cell size in px. |
| lineColor | string | "rgba(255,255,255,0.1)" | Grid line color. |
| sweepColor | string | "rgba(232,184,109,0.55)" | Diagonal light-sweep color. |
| speed | number | 0.4 | Grid drift speed in px per frame. |
| sweepDurationInFrames | number | 150 | Frames for one full sweep loop. |