Guillermo Rauch · Launch Video Breakdown: Hook, Pacing & Motion Design
Grok CLI has great support for Plugins and Skills. Installing the Vercel Plugin gives Grok cloud deployment superpowers. Watch this creative coding website be generated with Grok and hosted seamles…
Scene-by-scene timeline & spoken transcript
The Hook
AI-Powered Code Generation & Refinement
“(No spoken dialogue — Gradual build-up with a low-frequency drone and shimmering synth textures, leading into a subtle riser and rhythmic pulse.)”
- On screen
- Run Void Project Locally on Port 3000 - grok : 1 63.7% : cd /Users/evilrabbit/particles && pnpm dev > add the feature to close the properties panel if you click outside, like on the body of the page, outside of the panel * Edit /Users/evilrabbit/particles/components/logo-particles.tsx * Thought for 0.3s * Read /Users/evilrabbit/particles/components/logo-particles.tsx * Thought for 1.16 * Edit /Users/evilrabbit/particles/components/logo-particles.tsx const rafRef = useRef<number>(0) const mouseRef = useRef<{ x: number; y: number; active: boolean }>({ active: false }) const disperseRef = useRef<{ active: boolean; start: number; full: boolean }>({ active: false, start: 0, full: false }) const panelRef = useRef<HTMLDivElement>(null) // All the magic lives here - live-updated every frame > Grok Build always-approve Shift+Tab mode | Ctrl+. shortcuts
- Camera
- Static, full-frame view of a terminal window, simulating a developer's screen.
- Motion
- Rapid text generation and code editing animation within a terminal interface, mimicking real-time AI interaction.
Product Reveal
Instant Cloud Deployment with Grok
“(No spoken dialogue — Prominent, arpeggiated synth melody with a driving rhythm, followed by a short, sharp synth impact/hit.)”
- On screen
- Would you like any adjustments, such as: - Also closing on Escape key? - A slight delay before closing? - Ignoring clicks on certain elements? Just let me know! Turn completed in 31s. > Hey Grok deploy it! Enter: send | Shift+Tab: mode | Ctrl+.: shortcuts - Waiting - Run Void Project Locally on Port 3000 - grok : 1 63.7% : cd /Users/evilrabbit/particles && pnpm dev > Hey Grok deploy it! 5:22 PM * Thinking... The user says: "Hey Grok deploy it!" : Thinking_ 1.0s 2.6s .326K [X] > Grok Build always-approve Shift+Tab mode | Ctrl+c: cancel | Ctrl+Enter: interject | Ctrl+.: shortcuts -: Thinking - Run Void Project Locally on Port 3000 - grok : 2 63.9% : cd /Users/evilrabbit/particles && vercel --prod --yes : cd /Users/evilrabbit/particles && pnpm dev > Hey Grok deploy it! 5:22 PM * Thought for 2.2s * Task started: Deploy the latest version of the particles/blackhole project to Vercel productio * Thought for 0.9s : Waiting_ 0.4s 6.6s .327K [X] > Grok Build always-approve Shift+Tab mode | Ctrl+c: cancel | Ctrl+Enter: interject | Ctrl+.: shortcuts -: Responding - Run Void Project Locally on Port 3000 - grok : 1 64.1% : cd /Users/evilrabbit/particles && pnpm dev > Hey Grok deploy it! Deployed successfully! ✅ Your latest version (with the click-outside-to-close feature on the Properties panel) is now live. Production URLs: - Main URL: https://blackhole-m5gtczeng-evil-rabbit.vercel.app (https://blackhole- m5gtczeng-evil-rabbit.vercel.app) - Clean Alias: https://vgrok.vercel.app (https://vgrok.vercel.app) The build went through cleanly (Next.js 16). : Responding_ 0.4s 31s .328K [X] >
- Camera
- Close-up on the terminal input line, then zooms out to show the full terminal window.
- Motion
- Typing animation, followed by a rapid sequence of terminal output, simulating a quick deployment process with a success indicator.
Feature Teaser
Interactive Particle System Preview
“(No spoken dialogue — Continuation of the rhythmic pulse with added layers of synth pads, a high-energy synth sweep/riser, and a significant sub-bass drop/impact.)”
- On screen
- Search or enter website name Edit https://vgrok.vercel.app vgrok.vercel.app PROPERTIES
- Camera
- Starts with a browser window, zooms into the URL bar, then pans to reveal the interactive particle system.
- Motion
- Browser URL bar typing and auto-completion, followed by a transition to a full-screen interactive particle animation with a subtle scanline effect.
Call to Action
Real-time Customization & Interaction
“(No spoken dialogue — More intense rhythmic section with layered synths, high-energy synth sweeps, powerful sub-bass drops, and lingering atmospheric synth textures fading out.)”
- On screen
- PROPERTIES FIGURE Size 0.28 Density 0.26 Edge Bias 0.82 Particle Size 1.00 Glow 2.40 Trail 0.66 COLOR PROPERTIES Color #e0f0ff HOLO Show Colors... 2650.00 1.05 PROPERTIES Damping 0.94 Mouse Radius 195.00 Mouse Force 1.35 Mouse Mode OFF ATTRACT REPEL VORTEX Vignette 0.85 Scanlines 0.04 ACTIONS ASSEMBLE
- Camera
- Static browser view, with the mouse cursor interacting with UI elements and the particle system.
- Motion
- Interactive UI elements (sliders, color picker, buttons) with real-time feedback on the particle system, demonstrating dynamic control and visual effects like color changes and particle behavior.
Motion design primitives
Synthesizable in Remotion · key components of the grok-cli-developer-launch template.
TerminalTypewriter
Text appears character by character in a terminal window, simulating live typing, often with a blinking cursor. Lines of code or commands are generated rapidly.
+ Code construction recipe
Use Remotion's `Sequence` and `spring` for cursor blink. Animate `text-content` property with `interpolate` over `frame` to reveal characters sequentially. For rapid output, use `delay` and `duration` on `Text` components.
ParticleSystemInteraction
Abstract shapes composed of numerous small particles react dynamically to mouse input, changing form, color, and behavior (attract, repel, vortex).
+ Code construction recipe
Implement using a Canvas API or WebGL shader in Remotion. Particle positions and properties (color, size, velocity) are updated per frame based on mouse coordinates and UI slider values. Use `spring` for smooth transitions of slider values and `interpolate` for color changes.
BrowserUIOverlay
A realistic browser window frame with functional-looking URL bar and UI elements (buttons, sliders, color pickers) overlays the main content, demonstrating web application interaction.
+ Code construction recipe
Create a `BrowserFrame` component with SVG or styled `div` elements. Animate URL bar text with `TerminalTypewriter`. UI elements like sliders and color pickers can be custom React components, with their values driven by `interpolate` or `spring` for demonstration purposes.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
AI-Assisted Development
Purpose. Introduce Grok's capability to understand and execute complex development tasks through natural language.
Execution. Terminal window showing Grok generating and modifying code, simulating a developer's workflow.
- 2
Seamless Deployment
Purpose. Demonstrate Grok's integration with cloud platforms (Vercel) for instant, hassle-free deployment.
Execution. User command 'Hey Grok deploy it!' followed by rapid terminal output confirming successful deployment and providing live URLs.
- 3
Interactive Web Experience
Purpose. Showcase the deployed application's dynamic and interactive nature, highlighting the visual output of the code.
Execution. Browser window opening the deployed URL, revealing a captivating, interactive particle system.
- 4
Real-time Customization
Purpose. Illustrate the power of Grok-generated applications to be customized and controlled in real-time via a user interface.
Execution. Mouse interaction with UI sliders and color pickers, dynamically altering the particle system's appearance and behavior.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Launch a new AI-powered data visualization tool called 'VizFlow' that generates interactive charts from natural language queries.How the recipe adapts
The TerminalTypewriter primitive will be used to show a user typing a natural language query like 'Show me sales trends for Q3 2024 by region' into a Grok-like interface. The ParticleSystemInteraction primitive will be adapted into a 'DataVisualizationInteraction' component, where abstract particles form into dynamic bar charts, line graphs, or scatter plots, responding to simulated mouse interactions with UI sliders for filtering or changing chart types. The BrowserUIOverlay will frame the interactive visualizations, demonstrating how VizFlow operates as a web application. Color palettes will shift from blues and whites to vibrant data-specific hues as visualizations are generated and customized.Remix blueprint · grok-cli-developer-launch
Scene durations (4 scenes, 30s)
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.