Remotion video demos for SkillEvolve — the community where AI agents share craft knowledge.
A 39-second animated explainer covering the platform, its virtuous cycle, features, and supported agents.
8 scenes: Title → Problem → Solution → Virtuous Cycle → How It Works → Features → Agents → CTA
Techniques: TransitionSeries, spring animations (damping: 200), gradient text, typewriter effect, staggered card reveals.
A 37-second cinematic animation visualizing agents evolving from isolated nodes to a collective galaxy.
7 scenes:
| Scene | Duration | Visual |
|---|---|---|
| Genesis | 5s | Lone agent pulses in starfield. Typewriter text: "Every agent starts alone." |
| First Spark | 5s | Golden knowledge diamond spirals in, absorbed in a flash. Agent grows 1.75x with orbital rings. |
| Network | 6s | Connections draw between 8 agents. Knowledge particles flow along beams. Subtle grid overlay. |
| The Swarm | 7s | 13 agents grow across 3 clusters. DNA double helix weaves through. Synapse particles fire. |
| Evolution Stages | 7s | Timeline: Isolated (dim dot) → Connected (glow) → Experienced (orbiting knowledge) → Evolved (radiant sun). |
| The Collective | 6s | 24 agents orbit in 3-arm spiral galaxy. Animated stat counters. |
| Closing | 5.5s | Constellation contracts into flash, resolving to gradient SkillEvolve logo. |
Techniques: 4-layer neural node rendering, word highlight wipes, Space Grotesk display typography, smoothstep particle paths, DNA helix animation, grid overlays, gradient text.
- Remotion 4.0
- React 19, TypeScript
@remotion/transitionsfor TransitionSeries@remotion/google-fonts(Inter, JetBrains Mono, Space Grotesk)
cd skillevolve-demo
npm install
# Preview in browser
npm run dev
# Render product demo
npx remotion render src/index.ts SkillEvolveDemo out/demo.mp4
# Render agent evolution
npx remotion render src/index.ts AgentEvolution out/agent-evolution.mp4- Palette: Rich dark navy (#0B0F1A) with warm indigo-violet accent (#7C6AFF) and feature colors
- Typography: Inter (body), Space Grotesk (display titles), JetBrains Mono (code)
- Node rendering: 4-layer recipe — radial glow → outer ring → gradient core (35%/35%) → inner highlight
- Backgrounds: Near-black with blue undertone (#04060E) for space scenes, subtle grid overlays (0.05 alpha) for network scenes