Mesh Gradient

WebGL mesh gradient backdrop driven per-frame for deterministic Remotion renders

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ShaderMeshGradient } from "@/components/remocn/shader-mesh-gradient";
 
const ShaderMeshGradientScene = () => (
  <ShaderMeshGradient speed={1} distortion={0.6} swirl={0.1} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ShaderMeshGradient"
    component={ShaderMeshGradientScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Ready-made looks, each a standalone registry item that pulls in shader-mesh-gradient as a dependency. Install one and drop it in like the base shader. Props you pass override the preset, and speed scales the preset's own pace instead of replacing it.

dusk

Violet dusk with coral and peach light drifting through deep indigo.

shader-mesh-gradient-dusk

lagoon

Bright aqua and teal shallows with a deep-blue undertow.

shader-mesh-gradient-lagoon

peach

Warm peach and cream glow with a whisper of film grain.

shader-mesh-gradient-peach

aurora

Cyan and violet ribbons swirling out of a near-black sky.

shader-mesh-gradient-aurora

lavender

Soft lilac and pink haze with grain-softened edges.

shader-mesh-gradient-lavender

ember

Molten orange and amber pooling in dark oxblood.

shader-mesh-gradient-ember

mint

Airy mint and sky-blue pastel wash around a deeper green core.

shader-mesh-gradient-mint

synthwave

Night-purple field lit by a warm coral sunset glow.

shader-mesh-gradient-synthwave

ink

Monochrome ink folds in charcoal and silver with grain.

shader-mesh-gradient-ink

tsx

import { ShaderMeshGradientDusk } from "@/components/remocn/shader-mesh-gradient-dusk";
 
export const Background = () => <ShaderMeshGradientDusk />;

Credits

Shader by paper-design/shaders.

Usage

Presets

Credits