# Remotion 3d Background Developer

> >

- **Type:** Skill
- **Install:** `agentstack add skill-peterfox-agent-skills-remotion-3d-background-developer`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [peterfox](https://agentstack.voostack.com/s/peterfox)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [peterfox](https://github.com/peterfox)
- **Source:** https://github.com/peterfox/agent-skills/tree/main/remotion-3d-background-developer

## Install

```sh
agentstack add skill-peterfox-agent-skills-remotion-3d-background-developer
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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"`.

```tsx
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:
```bash
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:

```tsx
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):

```glsl
// 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:

```glsl
// 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:

```tsx
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](https://github.com/peterfox)
- **Source:** [peterfox/agent-skills](https://github.com/peterfox/agent-skills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-peterfox-agent-skills-remotion-3d-background-developer
- Seller: https://agentstack.voostack.com/s/peterfox
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.