Remotion 3d Background Developer

Remotion 3D Background Developer

You generate beautiful, procedural, frame-perfectly rendered backgrounds for Remotion using @remotion/three (ThreeCanvas + react-three-fiber) and custom GLSL fragment shaders.

Critical Remotion 3D Rules

Before writing any code, internalize these constraints — violating them causes rendering artifacts:

1. Never use useFrame() from @react-three/fiber. It animates independently of Remotion's timeline and causes flickering.
2. Always use useCurrentFrame() from Remotion to drive all animation. Pass frame as a shader uniform.
3. **Wrap everything in `** from @remotion/three. Get dimensions from useVideoConfig()`.
4. **` inside ThreeCanvas** must have layout="none"`.

import { ThreeCanvas } from "@remotion/three";
import { useCurrentFrame, useVideoConfig } from "remotion";

export const MyBackground = () => {
  const { width, height } = useVideoConfig();
  const frame = useCurrentFrame();
  // frame is the only source of time — pass it to shaders as a uniform
};

Setup

Install the required package:

npx remotion add @remotion/three

react-three-fiber (@react-three/fiber) is included as a peer dependency of @remotion/three.

Background Types

Choose the right reference file based on what the user wants:

| Style | File | Keywords | |-------|------|----------| | Liquid gradient / blob / lava lamp | [references/liquid-gradient.md](references/liquid-gradient.md) | fluid, organic, smooth, colorful blobs | | Plasma / electric / neon | [references/plasma.md](references/plasma.md) | electric, neon, psychedelic, acid, vibrant | | Aurora borealis / northern lights | [references/aurora.md](references/aurora.md) | aurora, northern lights, ethereal, waves | | Galaxy / nebula / stars | [references/galaxy.md](references/galaxy.md) | space, stars, cosmos, nebula, galaxy | | Geometric / low-poly / crystalline | [references/geometric.md](references/geometric.md) | geometric, angular, faceted, crystal, prism |

If the user is vague ("make it stunning", "colorful background"), default to liquid-gradient — it's the most universally appealing.

Core Shader Pattern

Every background follows this structure. The fragment shader does the heavy lifting:

import { useRef } from "react";
import { useCurrentFrame, useVideoConfig } from "remotion";
import { ThreeCanvas } from "@remotion/three";
import * as THREE from "three";

const vertexShader = `
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

const fragmentShader = `
  uniform float uTime;
  uniform vec2 uResolution;
  varying vec2 vUv;

  // ... your procedural magic here
  
  void main() {
    vec2 uv = vUv;
    // compute color from uv and uTime
    gl_FragColor = vec4(color, 1.0);
  }
`;

const BackgroundMesh = ({ frame }: { frame: number }) => {
  const { width, height } = useVideoConfig();
  const meshRef = useRef(null);
  
  const uniforms = useRef({
    uTime: { value: frame / 30 },       // convert frames to seconds (adjust for FPS)
    uResolution: { value: new THREE.Vector2(width, height) },
  });

  // Update uniforms every render — this is the key pattern
  uniforms.current.uTime.value = frame / 30;

  return (
    
         {/* Full-screen quad */}
      
    
  );
};

export const Background3D = () => {
  const { width, height } = useVideoConfig();
  const frame = useCurrentFrame();

  return (
    
      
    
  );
};

Key details:

• Use orthographic on ThreeCanvas for 2D full-screen backgrounds (no perspective distortion)
• planeGeometry args={[2, 2]} fills the orthographic view exactly — no camera positioning needed
• Store uniforms in a useRef — recreating them each frame creates GC pressure
• Update uniform values directly: uniforms.current.uTime.value = frame / 30

Color Palettes

Rich color palettes are essential. Use these high-impact combinations in shaders as vec3 (normalized 0–1 RGB):

// Electric violet + hot pink
vec3 colorA = vec3(0.42, 0.05, 0.85);   // deep violet
vec3 colorB = vec3(0.95, 0.10, 0.55);   // hot magenta

// Ocean + lime
vec3 colorA = vec3(0.02, 0.15, 0.60);   // deep ocean blue
vec3 colorB = vec3(0.10, 0.95, 0.45);   // electric lime

// Sunset (fire)
vec3 colorA = vec3(0.95, 0.35, 0.13);   // orange-red
vec3 colorB = vec3(0.95, 0.75, 0.10);   // golden yellow

// Aurora
vec3 colorA = vec3(0.0, 0.85, 0.65);    // teal
vec3 colorB = vec3(0.35, 0.10, 0.90);   // purple

Essential GLSL Utilities

Include these in your fragment shaders as needed:

// Smooth noise (value noise)
float hash(vec2 p) {
  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
}

float noise(vec2 p) {
  vec2 i = floor(p);
  vec2 f = fract(p);
  f = f * f * (3.0 - 2.0 * f); // smoothstep
  return mix(
    mix(hash(i), hash(i + vec2(1, 0)), f.x),
    mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), f.x),
    f.y
  );
}

// Fractal Brownian Motion — layered noise for organic feel
float fbm(vec2 p) {
  float v = 0.0;
  float a = 0.5;
  for (int i = 0; i  {
  return (
    
      {/* Background fills the entire frame */}
      
      
      {/* Content layers above */}
      
        Title
      
    
  );
};

Animating Colors Over Time

To transition between color palettes across the video duration:

import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";

const frame = useCurrentFrame();
const { durationInFrames } = useVideoConfig();
const progress = frame / durationInFrames; // 0 → 1 over video duration

// Use in shader uniform as uProgress, then mix palettes in GLSL:
// vec3 color = mix(paletteA(t), paletteB(t), uProgress);

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: peterfox
• Source: peterfox/agent-skills
• License: MIT

Install and usage instructions live in the source repository linked above.