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

Credits

Shader by paper-design/shaders.

Introduction

WebGL shader backdrops wrapped for Remotion and driven per-frame for deterministic renders

Grain Gradient

Grainy multi-stop gradient that drifts slowly with film-grain texture over the blend