Mesh Gradient Background

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