Backgrounds

Mesh Gradient Background — editable Remotion component

A seamless full-composition mesh gradient with six palettes, deterministic ambient motion, quality controls, and content-aware visual bias.

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 mesh-gradient-background@0.1.0

Agent guidance

  • Layer Mesh Gradient Background below transparent Agent Motion components; it always fills the complete composition.
  • Start with aurora, iridescent, pastel, neon, midnight, or heatmap before providing a custom colors array.
  • Set contentBias to left when foreground content occupies the left side; the brightest blobs shift toward the opposite side.
  • Import calculateMeshGradientDuration to preview one exact seamless cycle for the selected preset or duration override.
  • Set motionAmount to zero for a static gradient while preserving the selected palette and composition coverage.
  • Use low quality for lightweight previews, medium for general work, and high when the background is a major visual element.
  • The background is fully rendered at frame zero and owns no scene entrance or exit transition.

Related Remotion components