Jog · Launch Video Breakdown: Hook, Pacing & Motion Design
CI is the bottleneck for shipping code at agent speed.
Scene-by-scene timeline & spoken transcript
Problem Agitation
CI Bottleneck: The Waiting Game
“(No spoken dialogue — Initial 'sparkle' or 'chime' sound effect accompanying the opening pizzicato, followed by playful orchestral music.)”
- On screen
- CI Every pull request goes for a run. Now your agents send hundreds. Slow, costly CI keeps them waiting.
- Camera
- Starts with a wide, slightly elevated perspective looking down a path. Static camera, then subtle zoom out as more characters appear.
- Motion
- Hand-drawn sketch lines animating into fully painted, textured scenes. Characters (rabbit, frog, crowd of animals) appear and move with simple, charming frame-by-frame animation. A barrier animates up and down. Text appears with a gentle fade-in/pop-up.
Product Reveal
Jog: The Solution Arrives
“(No spoken dialogue — A distinct, short 'whoosh' or 'sweep' sound effect marks a transition to a new musical phrase, maintaining the playful orchestral tone.)”
- On screen
- Introducing Jog GitHub Actions runners that keep up with your agents.
- Camera
- Quick cut to a new, wider landscape scene with a sunset backdrop. Static camera.
- Motion
- Scene transition via a quick cut. Text elements ("Introducing", "Jog", tagline) animate in with a soft, slightly bouncy reveal, mimicking a hand-drawn feel. The "Jog" logo appears with a subtle texture animation.
Feature Teaser
One Line to Speed
“(No spoken dialogue — Playful orchestral music continues.)”
- On screen
- Change one line. jobs: test: runs-on: ubuntu-latest jog steps:
- Camera
- Quick cut to a new scene, a field with a whiteboard. Static camera.
- Motion
- A whiteboard element slides into view. A frog character points with a stick. Text on the whiteboard is revealed with a typewriter-like effect, and a strikethrough animation on "ubuntu-latest" followed by "jog" appearing.
Feature Teaser
Unbeatable Value & Efficiency
“(No spoken dialogue — Playful orchestral music continues.)”
- On screen
- jog 80% less per minute than GitHub. 70% less per minute than Blacksmith. Now each dollar gets you 5x more! Per-minute pay-as-you-go list prices, Linux x64, same vCPU count, before included minutes. Checked October 2026. 80% less and 5x the minutes per dollar vs GitHub at 2-8 vCPU. 70% less: vs Blacksmith at every size.
- Camera
- Quick cut to a new scene, a riverside landscape. Static camera.
- Motion
- Animated characters (fox, rabbit, various animals) appear holding signs with percentage numbers. Text overlays animate in with a gentle pop and fade. The "5x more" banner slides in from the right.
Call to Action
Final Call: Optimize Your CI
“(No spoken dialogue — A significant orchestral build-up featuring timpani rolls and a brass swell, leading into the grand finale. A sustained, grand orchestral chord with a final 'ding' or chime sound effect, concluding the piece.)”
- On screen
- Jog Ship more. Spend a lot less. usejog.com
- Camera
- Quick cut back to the sunset landscape. Static camera.
- Motion
- The "Jog" logo reappears with a subtle bounce. The final tagline and website URL animate in with a confident, slightly bouncy reveal, timed with the orchestral crescendo. Characters subtly animate in the foreground.
Motion design primitives
Synthesizable in Remotion · key components of the painted-storybook-product-launch template.
PaintedSceneReveal
A scene transitions from a sparse, hand-drawn sketch outline to a fully rendered, impressionistic oil painting style, revealing details and colors over time.
+ Code construction recipe
Use Sequence and AbsoluteFill. Layer a Canvas or Image component with a shader (e.g., a custom GLSL shader that interpolates between a line-art texture and a full-color painted texture based on frame or progress). Alternatively, use interpolate to blend between two pre-rendered image sequences (sketch and paint) or apply a series of SVG filters (e.g., feMorphology for line thickness, feTurbulence for texture, feColorMatrix for colorization) to a base sketch layer.
BouncyTextPopIn
Text elements appear on screen with a slight overshoot and bounce, giving a playful, organic feel.
+ Code construction recipe
Apply spring animation to scale and opacity properties of text components. Use a damping value that allows for a noticeable bounce (e.g., damping: 10-15, stiffness: 100-150). Each character or word can be animated sequentially using Sequence and delay.
CharacterActionLoop
Small, charming animal characters perform simple, looping actions (e.g., running in place, waving, pointing, holding signs) within the scene.
+ Code construction recipe
Use SpriteSheet components for pre-rendered character animation frames. Control frame property with loop and interpolate functions. Position characters using AbsoluteFill or Absolute components with translateX/Y for movement across the scene.
DynamicDataReveal
Numerical data or key phrases are presented with a clear, impactful animation, often involving a character interaction or a visual metaphor.
+ Code construction recipe
For numbers, use interpolate on a numerical value to create a counting effect, combined with BouncyTextPopIn for the percentage sign. For text, use Sequence to reveal words or lines, potentially with a strikethrough effect implemented via an SVG line animation or a mask that reveals the new text.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
The Mundane Bottleneck
Purpose. Establish the common, frustrating problem of slow CI/CD.
Execution. A charming, idyllic scene is introduced, then disrupted by a 'CI' barrier and a growing crowd of waiting, frustrated animal 'agents.'
- 2
The Whimsical Solution
Purpose. Introduce the product as the magical, effortless answer.
Execution. A quick, uplifting scene change to a sunset landscape, revealing the product name 'Jog' with a playful flourish.
- 3
Effortless Integration
Purpose. Demonstrate the simplicity of adopting the solution.
Execution. A friendly frog character points to a code snippet on a whiteboard, highlighting a single line change that activates Jog.
- 4
Quantifiable Advantage
Purpose. Showcase the tangible benefits and superior performance.
Execution. Animated characters present clear, compelling statistics on cost savings and efficiency gains compared to competitors.
- 5
The Promise of Progress
Purpose. Reinforce the core value proposition and call to action.
Execution. Return to the serene landscape, displaying the product name, a powerful summary tagline, and the website for engagement, culminating in a grand orchestral finish.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Launching "CanvasFlow," an AI design tool that automates repetitive tasks.How the recipe adapts
The "PaintedSceneReveal" would show a designer's desk transforming from a cluttered, hand-sketched mess to a clean, AI-generated masterpiece. "BouncyTextPopIn" would introduce features like "Auto-Layout" or "Smart-Palette." "CharacterActionLoop" would feature a squirrel character rapidly organizing design assets or a bird character collaborating seamlessly. "DynamicDataReveal" would show "90% faster iterations" or "5x more projects completed" with animated charts and playful icons.Remix blueprint · painted-storybook-product-launch
Scene durations (5 scenes, 31s)
Key Remotion components
Related Developer tools Product Launches
Explore all Developer tools launches →
Agentic CLI for coding, building apps, and automating workflows.
Meet Qwen3.8-Max: A New Bar for Coding and Cowork. https://t.co/mJaA8vr6xT
Introducing the Box HTML editor. Create, edit, preview, and collaborate on HTML files directly in Box, no additional downloads, no external tools, no re-uploads. Your HTML files can now operate in th