ruNNtime · Launch Video Breakdown: Hook, Pacing & Motion Design
ruNNtime is a library for running neural networks in browsers, built on TypeGPU. The demo runs speech-to-text plus a privacy filter together on-device.
Scene-by-scene timeline & spoken transcript
The Hook
Interactive Voice Input Prompt
“(No spoken dialogue — A flat white line appears, then subtly animates to suggest readiness for audio input.)”
- On screen
- say something... hold space to peek under the redactions c clears
- Camera
- Static, centered view of a minimalist interface.
- Motion
- Subtle line animation, text fade-in.
Problem Agitation
Real-time Speech-to-Text with Privacy Redaction
“Hi, my name is Jakob and I live at the Wall Street.”
- On screen
- Hi. Hi, my name is Jakob. Hi, my name is NAME and I live at the Wall Street. hold space to peek under the redactions c clears
- Camera
- Static, centered view.
- Motion
- Waveform animation, real-time text transcription, dynamic redaction boxes appearing over sensitive information.
Product Reveal
Expanding Redaction and Privacy Filter
“You can reach me at Richmond.”
- On screen
- Hi, my name is NAME and I live at the ADDRESS. You can reach me at Richmond. hold space to peek under the redactions c clears
- Camera
- Static, centered view.
- Motion
- Continued real-time text transcription, redaction boxes dynamically resizing and repositioning to cover new sensitive data.
Feature Teaser
Comprehensive Data Masking
“You can reach me at something at”
- On screen
- Hi, my name is NAME and I live at the ADDRESS. You can reach me at EMAIL. hold space to peek under the redactions c clears
- Camera
- Static, centered view.
- Motion
- Real-time text transcription, redaction boxes expanding to cover email address, demonstrating robust privacy filtering.
Motion design primitives
Synthesizable in Remotion · key components of the realtime-code-redaction-demo template.
RealtimeWaveform
A horizontal white line in the center of the screen dynamically animates into a fluctuating waveform, visually representing live audio input. The waveform's amplitude responds directly to speech.
+ Code construction recipe
Use Remotion's <Audio> component to get audio data. Map audio amplitude to SVG path 'd' attribute points, interpolating between a flat line and a dynamic sine wave. Apply a subtle blur or glow effect to the line for a modern feel.
DynamicRedactionBoxes
Semi-transparent, dark rectangular boxes with a thin red border appear and resize over specific words as they are transcribed, effectively redacting sensitive information in real-time.
+ Code construction recipe
Utilize Remotion's <AbsoluteFill> and <Sequence> components. For each redacted word, render a <Rect> component with dynamic width/height based on text metrics. Animate opacity and scale using 'spring' for a smooth, responsive appearance. Use a 'z-index' to ensure boxes overlay text.
LiveTranscriptionText
Text appears character-by-character or word-by-word on screen, mimicking live speech-to-text transcription. The text is clean, sans-serif, and positioned centrally.
+ Code construction recipe
Implement a custom text component that takes a full string and a 'progress' prop. Use 'split' to break the string into words/characters. Animate the 'opacity' and 'transform' (e.g., slight Y-axis shift) of each word/character based on its index and the 'progress' prop, creating a typewriter effect. Use a monospace font for a technical feel.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
The Setup
Purpose. Introduce the interactive element and set the stage for a voice-controlled demonstration.
Execution. A static prompt 'say something...' with a flat line, awaiting input.
- 2
Live Input & Initial Redaction
Purpose. Demonstrate the core speech-to-text and privacy filtering functionality in action.
Execution. Waveform animates, text appears, and redaction boxes instantly cover 'Jakob' and 'Wall Street'.
- 3
Expanding Privacy
Purpose. Show the system's ability to identify and redact more complex or extended sensitive information.
Execution. Redaction boxes dynamically resize and reposition as more personal details are spoken and transcribed.
- 4
Comprehensive Filtering
Purpose. Highlight the robustness of the privacy filter across different types of sensitive data, like email addresses.
Execution. New redaction boxes appear over an email address, reinforcing the product's thoroughness.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Launch a new AI-powered code linter that automatically redacts insecure code patterns.How the recipe adapts
The RealtimeWaveform primitive is replaced by a 'RealtimeTypingIndicator' that animates a cursor and text as if code is being typed. DynamicRedactionBoxes are adapted to cover insecure code snippets instead of personal data. LiveTranscriptionText becomes 'LiveCodeTranscription', displaying code as it's 'typed' and then redacting parts of it. The spoken dialogue would explain the code and the vulnerabilities being detected.Remix blueprint · realtime-code-redaction-demo
Scene durations (4 scenes, 8s)
Key Remotion components
Related Developer Tools Product Launches
Explore all Developer Tools launches →
Agentic CLI for coding, building apps, and automating workflows.
AI is already smart enough. Real-world tasks are still slow, expensive and unreliable, because we hand AI a computer built for humans, then wrap it in a heavy harness. AI doesn’t need to get smarter
Big day 🔥 🚀 Introducing Dolphin AI - an agentic AI studio for complete video production. The story of Dolphin is very interesting. It didn’t start as a product. It started as an internal tool. W