
A complete walkthrough of Post for Site, a newly launched SaaS.
The Hook
“(No spoken dialogue — ambient visual, silent video)”
Product Reveal
“(No spoken dialogue — ambient visual, silent video)”
Feature Teaser
“(No spoken dialogue — ambient visual, silent video)”
Call to Action
“(No spoken dialogue — ambient visual, silent video)”
Synthesizable in Remotion · key components of the saas-ui-walkthrough-template template.
Simulates quick, natural scrolling within a web browser, revealing new content sections smoothly. The scroll is fast but readable, ensuring information is absorbed without abrupt cuts.
Use `interpolate` with `scrollPosition` to animate `translateY` of content containers. Apply a `cubic-bezier` easing function for a natural, non-linear scroll feel. Ensure content is pre-rendered to avoid pop-in.
Text elements appear and disappear instantly or with a subtle fade, mimicking user input or system updates. This is often paired with UI element changes like button states or form field updates.
Implement `spring` animations for `opacity` and `scale` on text elements. For instant changes, use conditional rendering based on `frame` or `currentScene` props. Utilize `Sequence` for precise timing of multiple text reveals.
Buttons and interactive elements respond to simulated clicks and hovers with subtle visual feedback, such as a background color change, a slight scale, or a shadow effect.
Use `spring` for `backgroundColor`, `scale`, and `boxShadow` properties. Define `hover` and `active` states using `useCurrentFrame` and `interpolate` to simulate user interaction. Ensure `durationInFrames` is short for snappy feedback.
Purpose. Quickly introduces the core problem of content creation and hints at an effortless solution through a direct UI interaction.
Execution. A user pastes a URL and clicks 'Read this page', immediately setting up the product's core function.
Purpose. Demonstrates the flexibility and control users have over the AI-generated content.
Execution. Rapid scrolling through various options for audience, tone, length, and specific content directives.
Purpose. Showcases the AI's capability to process information and generate diverse content angles.
Execution. Loading screens with changing text indicating different stages of AI analysis, followed by the presentation of multiple generated posts.
Purpose. Highlights the benefits of the service and guides the user towards subscription.
Execution. Scrolling through detailed explanations of generated posts, followed by a clear display of pricing tiers and calls to action.
Objective
A new project management SaaS called 'TaskFlow' that simplifies task delegation and progress tracking.How the recipe adapts
The TaskFlow remix would feature a browser window showing the TaskFlow dashboard. The RapidUIScroll primitive would demonstrate scrolling through project lists and task details. DynamicTextReveal would show new tasks being added or status updates appearing. InteractiveButtonHighlight would be used for clicking 'Assign Task' or 'Mark Complete' buttons, with subtle animations. The overall aesthetic would remain clean and functional, focusing on the intuitive flow of managing projects within the application.Scene durations (4 scenes, 83.8s)
Key Remotion components
Don't type, just speak. Flawless voice-to-text across every app at 240 WPM.

One workspace for knowledge scattered across Slack, email, Docs, and Notion. Connect your tools and build apps and agents that stay live with your data.

Notion positions itself as the backbone of your dock — a brand film of the Notion icon among everyday apps, ending on “Works with everything.”