Backgrounds

Grid Background — editable Remotion component

A seamless full-composition grid system with orthogonal, perspective, dotted, technical, cyber, and minimal visual presets.

Component details

Version
0.1.0
License
MIT
Duration
8.0 seconds
Dimensions
1920 × 1080

Prerequisite: Create a Remotion project

Agent Motion installs components into an existing Remotion project. If you are starting fresh, create a blank project first:

npx create-video --yes --blank my-video

Add editable source

Run this command from the root of your Remotion project. No separate Agent Motion CLI installation is required.

npx @agent-motion/cli add grid-background@0.1.0

Agent guidance

  • Layer Grid Background below product UI, code, terminal, charts, or diagrams; it fills the complete composition.
  • Use blueprint and technical for diagrams, perspective and cyber for developer launches, dot-grid for product UI, and minimal for editorial layouts.
  • Import calculateGridBackgroundDuration to preview one exact seamless cycle for the selected preset or duration override.
  • Set motionAmount to zero for a static background while preserving all preset geometry.
  • Lower opacity when the foreground contains dense text or fine chart marks.
  • The background is complete at frame zero and owns no scene entrance or exit transition.

Related Remotion components