
A new text-to-speech web app template just shipped in Shadcn UI Kit.
The Hook
“(No spoken dialogue — silent video with ambient UI interactions.)”
Product Reveal
“(No spoken dialogue — silent video with ambient UI interactions.)”
Feature Teaser
“(No spoken dialogue — silent video with ambient UI interactions.)”
Call to Action
“(No spoken dialogue — silent video with ambient UI interactions.)”
Synthesizable in Remotion · key components of the shadcn-ui-kit-feature-demo template.
After a 'Generate speech' button click, a loading spinner appears, followed by a success toast, and then a responsive audio waveform visualizes the generated speech, with a playhead scrubbing through it.
Animate a `LoadingSpinner` component with `loop` and `rotate`. Implement a `Toast` component with `spring` for entry/exit. The waveform can be an SVG path or `Canvas` drawing, with `interpolate` driving the playhead position and `random` or `Perlin noise` for dynamic bar heights.
A cursor interacts with UI sliders, dragging them to new values, which are reflected numerically. A toggle switch is also clicked, changing its state.
Use `interpolate` for the cursor's drag path and the slider's thumb position. Bind slider value changes to `Text` components. Implement a `spring` animation for the toggle switch's state change (e.g., `x` position of the thumb, background color).
Purpose. Introduce the broad capabilities of the Shadcn UI Kit and hint at new features.
Execution. Wide shot of a complex dashboard, followed by a guided cursor navigation through the sidebar.
Purpose. Direct attention to the specific new 'Text to Speech' functionality.
Execution. Zoom-in on the sidebar, cursor click on 'Text to Speech', and immediate transition to the feature's dedicated page.
Purpose. Showcase the primary use case of the text-to-speech feature: generation and playback.
Execution. Typing animation, 'Generate speech' button click, loading state, success message, and audio waveform visualization.
Purpose. Highlight the depth of control and additional features available within the tool.
Execution. Interaction with voice adjustment sliders, toggling options, and switching to the 'History' tab.
Objective
A user wants to generate a React component using natural language with a new AI code generation tool.How the recipe adapts
The video would open with a wide shot of the code editor UI. A cursor would navigate a sidebar to 'AI Code Generator', click it, and transition to a prompt input field. The user types 'Generate a responsive React Navbar with Tailwind CSS'. A 'Generate Code' button is clicked, a loading spinner appears, then the generated code populates the editor. The cursor then interacts with sliders to adjust 'Responsiveness' and 'Tailwind Version', and a 'Compile' button is clicked, showing a success message.Scene durations (4 scenes, 14s)
Key Remotion components

xAI opens voice cloning on its API: build a custom voice in about two minutes or pick from 80+ voices in 28 languages.
Agentic CLI for coding, building apps, and automating workflows.

Sakana AI launches Fugu, a multi-agent orchestration system served through a single model API, led by its Fugu Ultra model.