
This is why it sucks and AI replacing UI and apps makes no sense The order flow of using the Starbucks app (19 seconds) vs ChatGPT (103 seconds)
The Hook
“(No spoken dialogue — Sustained, evolving pad sound, high-frequency riser builds to a significant sub-bass drop/impact.)”
Problem Agitation
“(No spoken dialogue — Rhythmic, arpeggiated synth pattern establishes a driving, high-energy feel. High-frequency sweep/riser leads into a pronounced sub-bass impact.)”
Product Reveal
“(No spoken dialogue — Arpeggiated synth continues, joined by layered electronic elements and a bright, percussive synth melody. Final powerful sub-bass drop/impact.)”
Call to Action
“(No spoken dialogue — Brief, sustained synth chord fades out.)”
Synthesizable in Remotion · key components of the rapid-ui-flow-showcase template.
A mobile screen rapidly scrolls vertically, revealing new content sections with a slight bounce at the end of the scroll.
Use `interpolate` for `translateY` with a `spring` easing function. Implement `overflow: hidden` on the container and animate the `scrollTop` property or the `transform: translateY` of the content.
A product image and details smoothly slide up from the bottom or fade in as a modal overlay, drawing immediate attention to the selected item.
Employ `interpolate` for `opacity` and `translateY` with an `easeOutCubic` curve. Use a `div` with `position: fixed` and `z-index` for the overlay, animating its `transform` property.
A map interface dynamically zooms and pans to highlight a specific location, followed by a list of relevant results appearing below.
Utilize `interpolate` for `scale` and `translateX`/`translateY` on the map image or SVG. Combine with a `stagger` effect for the list items sliding in from the bottom using `translateY` and `opacity`.
Purpose. Hook the viewer with a rapid overview of the app's main screen and a quick scroll.
Execution. Fast vertical scroll on the Starbucks app home screen, immediately followed by a sub-bass impact.
Purpose. Demonstrate the ease of navigating categories to find a specific product.
Execution. Quick horizontal and vertical swipes through app menus, landing on 'Energy Refreshers'.
Purpose. Show the process of selecting a product, viewing details, and choosing options.
Execution. Tapping a product, modal pop-up with details, selecting a size (Grande).
Purpose. Illustrate the final steps of store selection and order review, highlighting efficiency.
Execution. Map interaction to choose a store, final order summary with pickup details and checkout button.
Objective
Launch a new AI-powered task management app called 'FlowState'.How the recipe adapts
The video would open with a rapid scroll through FlowState's main dashboard, showcasing various project cards. A modal pop-up would then highlight the 'AI-powered prioritization' feature, demonstrating a task being automatically reordered. Next, a quick tap would reveal a project's sub-tasks, with each task item animating in sequentially. The final sequence would show selecting a team member for a task from a dynamically loaded list, culminating in a 'Share & Collaborate' button tap, all synchronized with the electronic score and sub-bass impacts.Scene durations (4 scenes, 19s)
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: