Spotify · Launch Video Breakdown: Hook, Pacing & Motion Design
Vendor-neutral agentic development environment from Spotify — one place to manage agent sessions across Claude, Gemini CLI and Codex. Used by 1,300+ Spotify engineers, now open to try.
Scene-by-scene timeline & spoken transcript
The Hook
Multi-Agent Terminal Cascade
“As developers, we're constantly juggling multiple tools and contexts. Zerp brings them all together.”
- On screen
- Xirp Claude Code v2.1.220 Welcome back! Tips for getting started Run /init to create a CLAUDE.md file with instructions for Claude. We'll have launched Claude in your home directory. For the best experience. What's new Bug fixes and reliability improvements Claude Opus 5 (claude-opus-5), now the default Opus model. - 2x faster. Added sandbox network.strictAllowList setting to deny non-allowlisted hosts. /release-notes for more Fable 5 is now a standard part of your Max plan You can use up to 50% of your weekly usage limit on Fable 5. If you hit your limit, you can continue on Fable 5 with usage credits. Fable 5 draws down usage faster than Opus 4.8. Run /model and select https://support.claude.com/en/articles/15424964-claude-fable-5-promotional-access > Try 'create a util logging.py that ...' manual mode on ? for shortcuts <- for agents OPENAI CODEX v1.0 The OpenAI Codex command-line interface. Usage: codex [OPTIONS] [ARGS]... Options: -h, --help Show this message and exit --version Show the version and exit Commands: execute Run natural language code. generate Generate code from a prompt. test Test natural language code. translate Translate code to another lan- openai-codex:~ >GEMINI Uncovering Gemini's Awesome (esc to cancel, Zls) Using 1 GEMINI.md files /bin/gemini-cli (sandbox) [release=v0.5.0-gemini-0.5-gcs (10% context left)] CLAUDE.md CLAUDE_GUIDE.md CLAUDE_CONTEXT.md CLAUDE_SETUP.md
- Camera
- The camera starts on a single terminal window, then rapidly zooms out and pans to reveal multiple overlapping terminal windows, each displaying different AI agent interfaces (Claude, Codex, Gemini).
- Motion
- Rapid zoom-out and pan, layered UI elements, quick cuts, and a 'card stack' animation effect for terminal windows.
Problem Agitation
The Context Problem
“But context is often lost between sessions. Zerp ensures shared context that builds with every session.”
- On screen
- Xirp Projects Sessions API-GATEWAY Atomic rate limit counters Circuit breaker for upstream Fail fast on bad config Cache AWKS key lookups Hot reload route config Route table trip lookup EVENT-INGEST-SERVICE Add OpenTelemetry tracing Move devtools to worker pool Cache kubelogs lookups Retry backoff and dead-letter queue Fix offset commit race Claude Code v2.1.220 Welcome back! Tips for getting started Run /init to create a CLAUDE.md file with instructions for Claude. We'll have launched Claude in your home directory. For the best experience. What's new Bug fixes and reliability improvements Claude Opus 5 (claude-opus-5), now the default Opus model. - 2x faster. Added sandbox network.strictAllowList setting to deny non-allowlisted hosts. /release-notes for more Message from Spotify: If you are blocked by typing (sandbox) - it keeps Claude Code from touching files outside your project or reaching unexpected networks, even if a permission or policy injection tries to. Sandbox blocking your! Run no-disable-sandbox to keep working, then let us know in #claude-api-config so we can fix it for everyone If you are blocked by typing (sandbox) - it keeps Claude Code from touching files outside your project. Auto mode is on by default. If you get a permission prompt, pay attention - it means something unusual is happening. +1 Zerp /plus Zerp makes the counter then increments in a separate Redis call, so concurrent requests can both pass at the limit boundary and exceed the configured rate. Meanwhile an atomic Zerp then increments in a Redis call, and a concurrent request then passing the limit. I'll start by exploring the codebase to find the rate limiting implementation. Searched for 2 patterns, read 3 files Found the race condition. The film method does a GET then INCR in the same Redis call, so concurrent requests can both read the same count and both pass. I'll replace it with a Lua script that atomically increments and checks the limit. Then add a concurrency test. Reading 1 file, listing 2 directories, running 1 shell command. /bin/claude-cli (sandbox) [release=v0.5.0-claude-0.5-gcs (10% context left)] > Envisioning. (12s + 800 tokens) > Refactor this component to comply manual mode on ? for shortcuts <- for agents OpenAI Codex (v0.54.4) model to change /api-gateway-workflow-fix-fail-fast-config Tip: Run /test to enable our fastest inference with increased plan usage. Config read and parse errors are logged but not fatal, so a bug silently creeps into routes and API gateway. This means that if a config is malformed, it might still be used, leading to unexpected behavior. We need to ensure that malformed configs are rejected early. I'll trace the configuration load path and startup command, then implement fail-fast validation plus a listen-free dry run. I'll preserve existing CLI behavior and add focused tests for malformed, unreadable, and invalid configs. Run -q -rg --files -g 'AGENTS.md' -or 'vendor' -or 'node_modules' | xsd ^1,000p -q -rg --files -g 'vendor' -or 'node_modules' | xsd ^1,000p internal/router/router.go +4 lines (ctrl + T to view transcript) api-gateway/main.go Updated Plan Inspect startup, config loading, and existing tests Implement fail-fast validation and dry-run FLL flag Add tests and documentation. Then run verification The repository is small and centered on one gateway entrypoint, so I'm checking the full startup/config flow before choosing where validation belongs. The initial inspection is still traversing for repository guidance, after that I'll make the narrower, compatible change. Run git status --short; if [ -f AGENTS.md ]; then xsd -e ^1,200p AGENTS.md; fi; xsd -e ^1,200p cmd/gateway/main.go; xsd -e ^1,200p internal/router/router.go; xsd -e packages/api-gateway/router_test.go; xsd -e ^1,200p AGENTS.md; cat AGENTS.md +100 lines (ctrl + T to view transcript) /api-gateway/v1.v3.v0.0.1 Working (37s - esc to interrupt) 1 background terminal running - /dev/to view - stop to close /revise on my current changes api-gateway-workflow-fix-fail-fast-config > bypass permissions (ctrl+P to cancel) ? for agents Coding sessions start with organizational context already built in. Shared context that builds with every session.
- Camera
- The camera zooms into a single terminal, then pans across a multi-pane UI, highlighting different code sections and agent interactions. It then transitions to a full-screen text overlay.
- Motion
- Smooth camera pan, UI element highlighting, text reveal animation, and a subtle background animation of abstract shapes.
Product Reveal
Zerp: The Missing Layer
“(No spoken dialogue — The music features a driving electronic beat with a prominent sub-bass, layered with arpeggiated synth melodies and atmospheric pads. There are several high-energy audio transitions, including risers and sweeps, often culminating in a sub-bass drop or impact to emphasize key points. The overall sound design is modern, dynamic, and designed to build excitement and underscore the product's innovative nature.)”
- On screen
- Shared context that builds with every session. Xirp The missing layer between AI agents and your codebase. xirp.spotify.com
- Camera
- The camera transitions from a black background with abstract shapes to a solid orange background, revealing the Zerp logo and tagline. The text animates in with a subtle fade and scale.
- Motion
- Color wipe transition, text fade-in with scale, and a final URL reveal.
Call to Action
Build Like Spotify
“(No spoken dialogue — The music features a driving electronic beat with a prominent sub-bass, layered with arpeggiated synth melodies and atmospheric pads. There are several high-energy audio transitions, including risers and sweeps, often culminating in a sub-bass drop or impact to emphasize key points. The overall sound design is modern, dynamic, and designed to build excitement and underscore the product's innovative nature.)”
- On screen
- Build like Spotify
- Camera
- The camera quickly cuts to a black background with the Spotify logo and tagline, then fades to black.
- Motion
- Quick cut, text and logo reveal, and a final fade to black.
Motion design primitives
Synthesizable in Remotion · key components of the multi-agent-terminal-cascade-launch template.
MultiTerminalCascade
Multiple terminal windows, each representing a different AI agent, rapidly stack and fan out across the screen, creating a sense of simultaneous activity and integration. They then collapse back into a single, unified view.
+ Code construction recipe
Use `map` to render an array of `TerminalWindow` components. Animate `x`, `y`, `scale`, and `rotation` properties using `spring` for a dynamic, overlapping cascade effect. Control visibility with `interpolate` based on a shared `progress` value.
ContextualTextReveal
Text elements appear with a subtle fade-in and slight scale-up, often accompanied by a background color change or abstract shape animation, emphasizing key narrative points.
+ Code construction recipe
Implement a `Text` component with `opacity` and `scale` animated using `spring` or `interpolate` with an `easeOutCubic` curve. Combine with a `ColorWipe` or `ShapeMorph` component for background transitions.
DynamicUIPanHighlight
The camera smoothly pans across a complex UI, highlighting specific interactive elements or code sections with subtle glows or bounding boxes, drawing the viewer's attention to product features.
+ Code construction recipe
Utilize `AbsoluteFill` for the UI container. Animate the `translateX` and `translateY` properties of the container to simulate camera pan. Overlay `Rect` or `SVG` elements with `opacity` and `stroke` animations to create highlight effects, synchronized with the pan.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
The Juggling Act
Purpose. Introduce the common developer pain point of managing multiple tools and contexts.
Execution. Rapid cascade of different AI agent terminal windows, visually representing the fragmented workflow.
- 2
The Context Gap
Purpose. Agitate the problem by showing how context is lost and workflows are inefficient.
Execution. Smooth pan across a complex, multi-pane UI, highlighting the need for seamless context sharing.
- 3
Zerp's Solution
Purpose. Present Zerp as the unified solution that bridges the gap between agents and codebase.
Execution. Bold reveal of the Zerp logo and tagline on a vibrant background, emphasizing its role as the 'missing layer'.
- 4
Empowerment
Purpose. Conclude with a strong brand statement, linking the product to Spotify's engineering excellence.
Execution. Quick cut to the 'Build like Spotify' tagline, reinforcing credibility and aspiration.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Launch a new developer tool, 'FlowState', that visualizes and debugs microservice interactions.How the recipe adapts
The MultiTerminalCascade primitive would be adapted to show multiple fragmented microservice log windows, rapidly cascading and then unifying into a single FlowState dashboard view. The DynamicUIPanHighlight would pan across a complex graph visualization, highlighting problematic service calls in vibrant red. ContextualTextReveal would introduce FlowState's benefits, using a dark background with electric blue and neon green text accents, maintaining the fast-paced, high-energy feel of the original.Remix blueprint · multi-agent-terminal-cascade-launch
Scene durations (4 scenes, 19s)
Key Remotion components
Related Developer Tools Product Launches
Explore all Developer Tools launches →
xAI opens voice cloning on its API: build a custom voice in about two minutes or pick from 80+ voices in 28 languages.
Claude can now operate your Mac, opening apps, browsing and filling spreadsheets, as a research preview in Cowork and Claude Code.
Agentic CLI for coding, building apps, and automating workflows.