You can now mod Claude Code: - Change how it behaves - Customize the UI - Swap in your own features Write one with a few lines of TypeScript, or have Claude build it for you. Mods ship inside plugin
The Hook
“(No spoken dialogue — ambient visual with subtle UI sounds)”
Problem Agitation
“(No spoken dialogue — ambient visual with subtle UI sounds)”
Product Reveal
“(No spoken dialogue — ambient visual with subtle UI sounds)”
Call to Action
“(No spoken dialogue — ambient visual with subtle UI sounds)”
Synthesizable in Remotion · key components of the ai-agent-workflow-showcase template.
A horizontal bar with a dynamic sparkline graph and percentage text, indicating context usage. The bar fills and changes color based on the percentage, with an accompanying numerical increase.
Use Remotion's <AbsoluteFill> for positioning. Animate width and background color of a <Rect> component using `interpolate` for the bar fill. Render a <Path> or <Line> component for the sparkline, animating its `d` attribute. Use `spring` for smooth numerical transitions of the percentage and token count.
A modal dialog box appears, displaying a command, a list of affected files, and interactive 'Proceed'/'Cancel' buttons. The modal has a distinct border and shadow.
Implement with a <AbsoluteFill> for the overlay and a centered <View> for the modal. Animate the modal's `opacity` and `scale` using `spring` for pop-in. Use `map` to render file lists. Implement button hover states and click animations using `useCurrentFrame` and `interpolate` for visual feedback.
A code diff view within a framed component, showing line-by-line changes (additions in green, deletions in red). A numerical stepper indicates the current step in a sequence of edits.
Create a <View> for the diff frame. Use `map` to render lines of code, conditionally styling text color based on diff type (e.g., `+` or `-`). Animate the `opacity` and `y` position of lines for smooth transitions. Implement the stepper using a series of clickable <Text> or <View> components, highlighting the active step with a `spring` animation on its background color or scale.
Purpose. Introduce the product's ability to understand and manage context within an AI interaction.
Execution. Demonstrate 'Token Weather' with a dynamic progress bar and sparkline showing context filling up as files are read.
Purpose. Highlight the product's feature for preventing accidental destructive actions.
Execution. Show 'Blast Radius' with a modal warning about a `rm -rf` command, requiring explicit user confirmation.
Purpose. Showcase the AI's capability to perform complex code modifications across multiple files.
Execution. Illustrate 'Replay Theater' with a step-by-step diff viewer, demonstrating a function rename across a codebase.
Purpose. Conclude by emphasizing the user's ability to extend and customize the AI agent.
Execution. Display a clear call to action with bullet points detailing how users can 'mod Claude Code'.
Objective
Demonstrate a new secure data pipeline product that automatically validates and transforms incoming data streams.How the recipe adapts
The 'ContextSparkline' primitive becomes a 'DataFlowHealth' component, showing data volume and error rates. The 'InteractiveModalPrompt' transforms into a 'SchemaValidationAlert' modal, detailing data type mismatches and offering options to 'Correct' or 'Ignore'. The 'CodeDiffStepper' is re-imagined as a 'DataTransformationLog', visually stepping through SQL or Python script changes applied to data, highlighting additions and deletions in a similar diff format. The overall pacing remains slow and explanatory, focusing on the clarity of data operations.Scene durations (4 scenes, 72s)
Key Remotion components
To ensure that artificial general intelligence benefits all of humanity

Introducing Claude Fable 5: a Mythos-class model that we’ve made safe for general use. Its capabilities exceed those of any model we’ve ever made generally available. https://t.co/2AvmEjHIX8
To understand the true nature of the universe.