NewRemocn StudioGet the app
emocn

Mesh Gradient

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

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

Usage

// 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}
  />
);

Presets

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

Credits

Shader by paper-design/shaders.

Light Tunnel

Fly straight through the original OpenShaders hero field mapped into a light tunnel

Dusk

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