layerproof-remotion

A Claude Code-powered motion design agent for creating LayerProof teaser videos using Remotion.

Quick Start

1. Install dependencies

npm install

2. Open in Remotion Studio

npm run dev
# → Opens http://localhost:3000

Compositions

ID	Component	Description	Dimensions	Duration	Frames
layerproof-problem	LayerProofProblem	Teaser 1 — The Problem	1920×1080	33s	990
layerproof-solution	LayerProofSolution	Teaser 2 — The Solution	1920×1080	44s	1330
layerproof-gif-prompt	PromptMultiPlatform	GIF — Prompt → Editor Generation → Float (loopable)	1270×760	12s	360
layerproof-gif-slides	AISlideStack	GIF — AI Slide Stack (loopable)	1200×675	6.8s	205

Render

# Render Teaser 1
npm run render:problem

# Render Teaser 2
npm run render:solution

# Render both
npm run render:all

# Type check only
npm run typecheck

Script-First Workflow

All scenes are built from an approved script. The workflow is:

/write-script layerproof-problem "Show the pain of juggling 5 content tools"
# → Review and approve scripts/layerproof-problem.md (change status to approved)
/new-scene TheSetup 1 7 "Browser with orbiting app tabs, cursor clicking frantically"
/new-scene RewriteLoop 1 6 "Same message rewritten 3x, text flickers in and out"
/render problem

Steps

1. Generate script — script-writer agent writes scripts/[composition-id].md with every scene's copy, motion, and audio intent
2. Review + approve — edit the script to match your vision, then set status: approved in the frontmatter
3. Build scenes — /new-scene reads the approved script section and builds using it as source of truth
4. Review — scene-reviewer validates code including Script Compliance checklist
5. Render — /render outputs final video

Using Claude Code

Commands

/write-script layerproof-problem "Show the pain of managing content across 5 disconnected tools"

/new-scene TheSetup 1 7 "Dark browser with 4 orbiting app tabs, tension building"

/new-scene TextReveal 2 4 "Cinematic word-by-word reveal of the tagline 'One prompt. Every platform.'"

/render problem

Agents

Agent	Role
script-writer.md	Pre-production: writes structured scripts, no code
motion-designer.md	Scene creation: React/Remotion components, script-first
scene-reviewer.md	Quality review: technical, brand, and script compliance

Brand Reference

Token	Value
Background dark	#080808 (theme.colors.bgDark)
Background mid	#111111 (theme.colors.bgMid)
Accent pink	#FF589B (theme.colors.accentPink)
Accent yellow	#FFD600 (theme.colors.accentYellow)
Glass BG	rgba(255,255,255,0.06) (theme.glass.bg)
Glass border	rgba(255,255,255,0.12) (theme.glass.border)
Spring	stiffness: 80, damping: 22 (theme.motion.apple)
Font weight	headline 800, body 300

Never hardcode color values. Always use useTheme() from src/lib/theme.ts.

Project Structure

layerproof/
├── CLAUDE.md                        ← Agent memory: brand, scenes, spec
├── scripts/                         ← Pre-production scripts (source of truth)
│   ├── layerproof-problem.md        ← Teaser 1 script (draft → approved)
│   └── layerproof-solution.md       ← Teaser 2 script (draft → approved)
├── .claude/
│   ├── agents/
│   │   ├── script-writer.md         ← Pre-production specialist
│   │   ├── motion-designer.md       ← Scene creation specialist
│   │   └── scene-reviewer.md        ← Quality reviewer
│   ├── skills/
│   │   └── remotion.md              ← Remotion API reference
│   └── commands/
│       ├── write-script.md          ← /write-script command
│       ├── new-scene.md             ← /new-scene command
│       └── render.md                ← /render command
├── src/
│   ├── index.ts                     ← Remotion entry point
│   ├── Root.tsx                     ← Composition registry
│   ├── lib/
│   │   ├── animations.ts            ← Animation helpers
│   │   ├── theme.ts                 ← ThemeProvider + useTheme()
│   │   └── themes/
│   │       └── bold.ts              ← Bold theme tokens
│   └── components/
│       └── scenes/
│           ├── problem/             ← Teaser 1 scene components
│           └── solution/            ← Teaser 2 scene components
├── package.json
└── tsconfig.json