Dan McAteer · Launch Video Breakdown: Hook, Pacing & Motion Design
Open-source Claude Code plugin that lets sessions share context via a local graph. When two sessions touch the same file, grapevine drops an advisory note so Claude can decide whether to message the other session. Free & experimental.
Scene-by-scene timeline & spoken transcript
The Hook
Terminal Intro & Problem Statement
“(No spoken dialogue — silent video with ambient typing sounds.)”
- On screen
- Last login: Sat Aug 8 12:25:35 on ttys005 You have new mail. danielmcateer@Mac grapevine % ./demo/demo.sh Grapevine – shared awareness for independent Claude Code sessions Two sessions. Two worktrees. Neither knows the other exists – yet.
- Camera
- Static, full-screen terminal view, simulating user input.
- Motion
- Text typing animation, cursor blinking, instant text reveal.
Problem Agitation
Setting Up Dual Worktrees & Unaware Sessions
“(No spoken dialogue — silent video with ambient typing sounds.)”
- On screen
- Setting up a project with two worktrees: $ git worktree add ../shop-payments -b feature/payments ► Session A starts in shop (branch main) – task: hardening auth ► Session B starts in shop-payments (branch feature/payments) – task: Stripe webhooks ► Session B edits src/payments/webhook.ts (which imports auth/middleware) ► Session A edits src/auth/middleware.ts – the module B depends on...
- Camera
- Static, full-screen terminal view, text appearing line by line.
- Motion
- Sequential text reveal, subtle cursor animation, use of colored arrows for session differentiation.
Product Reveal
Grapevine's Advisory Note & Relationship Graph
“(No spoken dialogue — silent video with ambient typing sounds.)”
- On screen
- Grapevine whispers to Session A (via its own hook output – no message sent yet): Grapevine: you just modified src/auth/middleware.ts. Peer session "payments-3f" (feature/payments, their file src/payments/webhook.ts imports it) may be affected. If this change could break or unblock them, consider sending them a brief message; otherwise ignore. The relationship graph Grapevine built (/gv-graph): — Grapevine 🍇 graph — Adjacency (session → touched files): auth-a1 [main] └─ src/auth/middleware.ts payments-3f [feature/payments] └─ src/payments/webhook.ts Imports (file → file, one hop): src/payments/webhook.ts → src/auth/middleware.ts ```mermaid flowchart LR S0["auth-a1<br/>main"] F4f164c92e84a["src/auth/middleware.ts"] S0 -- touched --> F4f164c92e84a S1["payments-3f<br/>feature/payments"] F4398320aa042["src/payments/webhook.ts"] S1 -- touched --> F4398320aa042 F4398320aa042 -- imports --> F4f164c92e84a
- Camera
- Static, full-screen terminal view, new text lines appearing.
- Motion
- Text typing animation, new information appearing sequentially, visual representation of a graph.
Call to Action
Claude's Message & Grapevine's Value Proposition
“(No spoken dialogue — silent video with ambient typing sounds.)”
- On screen
- — what happens next in a real run (messages are written by each Claude) — Session A → SendMessage → payments-3f: "Heads up: requireAuth() now returns Session | null instead of throwing. Your webhook handler calls it – add a null check before you rebase." Session B receives it mid-task and adapts: "Thanks – adding the null guard to handleStripeWebhook now." Grapevine – your sessions, on the same page. github.com/DannyMac180/grapevine • claude --plugin-dir ./grapevine danielmcateer@Mac grapevine %
- Camera
- Static, full-screen terminal view, final lines of text appearing.
- Motion
- Sequential text reveal, final branding and call to action text appearing.
Motion design primitives
Synthesizable in Remotion · key components of the terminal-code-demo template.
TerminalTypewriterEffect
Text appears character by character, mimicking real-time typing in a command-line interface, often accompanied by a blinking cursor.
+ Code construction recipe
Utilize `interpolate` for `opacity` and `text-overflow` properties, combined with `substring` to reveal text progressively. A `spring` animation can be used for the blinking cursor's opacity.
SequentialLineReveal
New lines of text or code appear one after another, often with a slight delay, simulating a script execution or log output.
+ Code construction recipe
Employ `Sequence` components for each line, with a calculated `from` prop to stagger their appearance. `spring` or `tween` can animate `opacity` and `transform` (e.g., `translateY`) for a smooth entrance.
GraphVisualizationReveal
A textual representation of a graph or data structure is progressively drawn or highlighted, showing relationships between elements.
+ Code construction recipe
Use `Sequence` and `interpolate` to reveal different parts of the graph text. For actual graph drawing, consider SVG paths animated with `stroke-dasharray` and `stroke-dashoffset` or canvas drawing with `Path2D` and `stroke` animations.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
The Setup
Purpose. Introduce the context of independent developer sessions and the potential for conflict.
Execution. Initial terminal screen, typing commands to set up two worktrees, each with a distinct task.
- 2
The Conflict
Purpose. Demonstrate the problem of unawareness when sessions modify interdependent files.
Execution. Text appearing to show Session A and B editing files that depend on each other, without immediate communication.
- 3
The Solution
Purpose. Showcase Grapevine's ability to detect dependencies and provide advisory notes.
Execution. Grapevine's 'whisper' message appearing, followed by the visualization of the relationship graph.
- 4
The Resolution & CTA
Purpose. Illustrate how Grapevine facilitates communication and adaptation, then provide product details.
Execution. Claude's generated message and Session B's adaptation, concluding with Grapevine's tagline and links.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Launch a new AI-powered code refactoring tool, 'RefactorFlow', that automatically suggests and applies optimal code improvements across a codebase, ensuring consistency and reducing technical debt.How the recipe adapts
The terminal aesthetic will be adapted to show RefactorFlow analyzing code, highlighting areas for improvement with distinct colors (e.g., yellow for suggestions, green for applied changes). Instead of two sessions, the narrative will focus on RefactorFlow interacting with a single developer's codebase. Typing animations will simulate the developer initiating RefactorFlow, and sequential line reveals will show RefactorFlow's analysis output and the proposed refactoring steps. The 'relationship graph' primitive will be repurposed to visualize code dependencies and how RefactorFlow intelligently navigates them during refactoring. The final call to action will highlight RefactorFlow's efficiency and ease of integration.Remix blueprint · terminal-code-demo
Scene durations (4 scenes, 28s)
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.