Introduction

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

shader-warp150 frames, 30 fps

Your scene sits on topThe shader is the backdrop. Nothing else changes.

59 shadersWebGL, driven per frameBuilt on paper-design/shaders

How it works

Each component wraps a shader from paper-design/shaders and adapts it to the way Remotion renders video: headless, frame by frame, the same output on every pass.

Install a shaderEvery shader is its own registry item. Add one and the file lands in your project.
Drop it behind contentRender it first in an AbsoluteFill. Whatever follows sits on top as a full-bleed backdrop.
Tune, then go rawA speed control plus a few of its own. Any other paper-design prop passes straight through.

Installation

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

scene.tsx

tsx

import { AbsoluteFill } from "remotion";
import { ShaderMeshGradient } from "@/components/remocn/shader-mesh-gradient";
 
export const Scene = () => (
  <AbsoluteFill>
    <ShaderMeshGradient speed={1} />
    <AbsoluteFill>{/* your content on top */}</AbsoluteFill>
  </AbsoluteFill>
);

All shaders

Defaults are deliberately muted. Pick your own palette when the shader should lead.