Mesh Gradient Background

A background primitive that renders several large radial-gradient blobs and animates them via transform: translate() using Math.sin(frame) and Math.cos(frame) for organic, deterministic drift. Heavy CSS blur plus mix-blend-mode creates a soft mesh gradient without shaders.

Installation

$ pnpm dlx shadcn@latest add @remocn/mesh-gradient-bg

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { MeshGradientBg } from "@/components/remocn/mesh-gradient-bg";

const MeshGradientBgScene = () => (
  <MeshGradientBg
    colors={["#ff0080", "#7928ca", "#00d4ff", "#ffb800"]}
    speed={1}
    background="#0a0a0a"
  />
);

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

Props

Prop	Type	Default	Description
`colors`	`string[]`	`["#ff0080", "#7928ca", "#00d4ff", "#ffb800"]`	Colors used for the radial blobs. Any number of CSS colors.
`speed`	`number`	`1`	Drift speed multiplier. Higher = faster motion.
`background`	`string`	`"#0a0a0a"`	Base canvas color. Blend mode is auto-picked (screen on dark, multiply on light).
`blur`	`number`	`80`	CSS blur radius (in pixels) applied to each blob.
`className`	`string`	—	Optional className passed to the outer container.

Notes

Deterministic motion

Motion uses Math.sin(frame) and Math.cos(frame), so every render produces the same output for the same frame — safe for server-side rendering.

Blur performance

Large blur radii on big elements are expensive. If you see slow renders, reduce blur or the blob size before reaching for shaders.