
Introducing Generative UI for Claude Code, Codex and Pi Charts, forms, 3D, anything Your agent renders real UI for users while it works in a sandbox Powered by AI SDK's experimental HarnessAgent +…
The Hook
“(No spoken dialogue — ambient UI clicks and typing sounds)”
Product Reveal
“(No spoken dialogue — ambient UI loading sounds)”
Feature Teaser
“(No spoken dialogue — ambient UI scrolling and content loading)”
Call to Action
“(No spoken dialogue — ambient UI scrolling and content loading)”
Synthesizable in Remotion · key components of the ai-generative-ui-report template.
Simulates a user typing text into an input field, with a blinking cursor, followed by a rapid submission and UI transition.
Use `interpolate` for cursor opacity (blink effect) and `Sequence` for character-by-character text reveal. Trigger a `spring` animation for the subsequent UI element's scale/opacity on submission.
Smoothly scrolls a long document or report vertically, revealing new sections and data visualizations as it moves.
Implement a `scrollPosition` state and use `interpolate` to map it to `translateY` for the main content container. Use `spring` for individual section fade-ins and bar chart fills as they enter the viewport.
Bar charts dynamically fill from bottom to top, often accompanied by a numerical value reveal.
Animate the `height` property of SVG rectangles or `div` elements using `spring` or `interpolate` with an `easeOutCubic` curve. Coordinate with `Sequence` to reveal associated text labels.
Purpose. To immediately demonstrate the AI's interactive capability and ease of use.
Execution. Mouse cursor interaction with UI elements, typing animation, and selection of AI agents.
Purpose. To showcase the AI's ability to generate complex, structured UI content from a simple prompt.
Execution. Rapid transition from input to a fully rendered, detailed report UI.
Purpose. To highlight the depth and quality of the AI-generated content, including data visualizations.
Execution. Smooth, continuous scrolling through various sections of the report, revealing bar charts and detailed text comparisons.
Purpose. To emphasize the practical utility and decision-making support provided by the AI.
Execution. Scrolling to the 'When to Choose Each' section, with a final green checkmark confirming the comprehensive analysis.
Objective
Launch a new AI-powered financial analysis platform called 'QuantIQ'.How the recipe adapts
The DynamicTypewriterInput primitive will be used for a user typing a financial query. The ProgressiveContentScroll will reveal a detailed financial report with stock performance charts and market trend summaries. The DataBarChartFill primitive will animate revenue and profit growth bars. The overall aesthetic will be adapted with a slightly more corporate color palette, but retaining the clean UI and fast-paced motion language.Scene durations (4 scenes, 15s)
Key Remotion components

Anthropic Labs launches Claude Design, which turns conversation into prototypes, slides and one-pagers, powered by Claude Opus 4.7.

A vibe design partner with an AI-native canvas for turning ideas into UI.

Your work tools in Claude are now available on mobile. Explore Figma designs, create Canva slides, check Amplitude dashboards, all from your phone. Give it a try: