before.click · Launch Video Breakdown: Hook, Pacing & Motion Design
before.click ships featured apps. Clucky is the first app featured on before.
Scene-by-scene timeline & spoken transcript
The Hook
Curated App Store Discovery
“(No spoken dialogue — ambient visual of UI interaction)”
- On screen
- before Q Search apps, styles, or categories... App Store screenshots, paywalls & onboarding. Browse curated App Store screenshots from the best designed iOS apps 480 apps skills and alevazures/before-skills FEATURED Get featured -> Clucky Utilities View -> Screenshots Onboarding 14 Paywall 13 Icons All Productivity Health & Fitness Social Networking Finance Education Photo & Video Lifestyle Food & Drink News Games Sports Utilities Travel Graphics & Design Book Weather Reference Browser & AI Locket Widget Add your best friends to your Home Screen Rollcall Send pics to friends' Home Screens Weekly photo dumps with your best friends Saveee — Inspiration for you Lifestyle Browse millions of curated visuals. See anything that moves you If it's queer, it's here App of the Day Find funnies right next to you Discover local queer community Lex Social Networking
- Camera
- Static, wide shot of a web interface, with subtle mouse cursor movement highlighting elements.
- Motion
- Subtle UI interaction, cursor hover states, and a slight scroll to reveal more content.
Product Reveal
Introducing Clucky: The Unstoppable Alarm
“(No spoken dialogue — ambient visual of UI interaction)”
- On screen
- Clucky 337,868 clucks and counting Download the app hey! click me The loud alarm that won't shut up until you're up! A rooster alarm for iPhone. It keeps ringing until you finish a wake-up mission. Free to try. Download on the App Store
- Camera
- Static, centered shot of a product landing page, with a mouse cursor interacting with the main call to action.
- Motion
- Focus shift, cursor interaction, and a subtle 'click' animation on the 'Download on the App Store' button.
Feature Teaser
Deep Dive into App Categories
“(No spoken dialogue — ambient visual of UI interaction)”
- On screen
- before Q Search apps, styles, or categories... App Store screenshots, paywalls & onboarding. Browse curated App Store screenshots from the best designed iOS apps 480 apps skills and alevazures/before-skills FEATURED Get featured -> Clucky Utilities View -> Screenshots Onboarding 14 Paywall 13 Icons All Productivity Health & Fitness Social Networking Finance Education Photo & Video Lifestyle Food & Drink News Games Sports Utilities Travel Graphics & Design Book Weather Reference Browser & AI Hot Picks Latest Wake Up On The First Alarm Solve A Mission To Turn It Off Break The Snooze Habit + 6 more 7:30 am 6:30 am 9:00 am 11:19 am Clucky Utilities Envisioned Productivity A guided journey from understanding to relief. Instant relief and support during panic attacks Panic Attack Relief Rootd Health & Fitness How are you feeling? Not good. Confident. Endless Coloring Canvas Discover Creative Tools Relaxing Coloring Process Infinity Coloring Book Lifestyle Your metrics. Always visible. Always present, whenever you look At a glance, when it matters Crystal clear, hyper-local forecasts. Intuitive weather forecasts. RAD Weather Weather clean.minimal. customizable. 57 your WEATHER dashboard Weather with Personality. Walkie talkie. Yes, really. Pick your hardware. Twelve channels. Friends or Groups. Record Voice & Music Presets Tuned Just Right Flexible Audio Processing COPY Social Networking Quartz Music
- Camera
- Panning and scrolling across a detailed web interface, highlighting various app categories and their featured apps.
- Motion
- Smooth horizontal and vertical scrolling, with content appearing dynamically as the viewport moves. Emphasis on content density and variety.
Call to Action
Subscribe for New App Discoveries
“(No spoken dialogue — ambient visual of UI interaction)”
- On screen
- New apps every week Get a weekly email with freshly added screenshots, paywalls, and onboarding flows from top iOS apps. designer@company.com Subscribe MASTER YOUR COLLECTION POST YOUR PACK POLLS SICK WIDGETS Guitar Tuner & Metronome Guitar Chords & Fingerings Turn Pogressions into Songs Plan by the Moon Detailed Lunar Calendar Widgets & Live Activity Route 25 Productivity Guitar Wiz Music Moonritt Productivity Organize all your saves, links & screenshots Turn reels into travel plans Auto-extract recipes from videos Good with money. It starts here. Portion money into budgets, so you know what you can afford. Regularly review your spending, and see where it all goes. See who's going. Keep with friends. PLAYBILL
- Camera
- Continues panning and scrolling, ending on a subscription call to action and more app examples.
- Motion
- Fluid scrolling and content reveal, culminating in a clear call to action for email subscription, reinforcing the value proposition of continuous discovery.
Motion design primitives
Synthesizable in Remotion · key components of the dynamic-ui-showcase template.
DynamicUIScroll
A smooth, continuous scroll across a web interface, revealing new content horizontally and vertically. Elements appear and disappear gracefully at the viewport edges.
+ Code construction recipe
Utilize Remotion's `interpolate` function for `transform: translateX` and `transform: translateY` based on the current frame. Implement `overflow: hidden` on the container and render content off-screen, animating its position into view. Use `spring` for subtle easing on scroll stops or direction changes.
CursorHighlightInteraction
A mouse cursor moves deliberately across the screen, hovering over interactive elements and performing clicks, often triggering subtle UI feedback like button presses or selection states.
+ Code construction recipe
Animate the `top` and `left` CSS properties of a cursor SVG or image using `interpolate` or `spring` to simulate natural mouse movement. Implement conditional rendering or CSS class toggles for hover and click states on target UI elements, synchronized with cursor position and click events.
ContentGridReveal
New sections of a content grid or list smoothly slide into view as the user scrolls, maintaining a consistent visual rhythm and density.
+ Code construction recipe
Wrap grid items in a component that uses `spring` for `opacity` and `transform: translateY` or `translateX` when they enter the viewport. Coordinate the animation start times based on their position within the grid and the overall scroll progress.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
Problem/Opportunity Setup
Purpose. Establish the challenge of discovering quality apps and the value of curated content.
Execution. Initial wide shot of the 'before.click' platform, showcasing a vast, overwhelming array of app screenshots and categories, subtly implying the need for better curation.
- 2
Solution Introduction
Purpose. Introduce 'before.click' as the solution for app discovery and highlight a featured app.
Execution. Transition to a focused view of the 'Clucky' app's landing page, demonstrating its unique value proposition and direct call to action, showcasing the platform's ability to feature high-quality apps.
- 3
Feature Exploration & Breadth
Purpose. Demonstrate the depth and variety of curated content available on the platform.
Execution. Dynamic scrolling and panning across various app categories and detailed app screens, illustrating the extensive range of apps and the platform's comprehensive coverage of different niches.
- 4
Engagement & Call to Action
Purpose. Encourage continued engagement and subscription for ongoing discovery.
Execution. Concludes with a clear call to action for email subscription, reinforcing the promise of 'new apps every week' and showcasing more diverse app examples to entice users.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Showcase 'CodeFlow AI', a new AI-powered coding assistant that helps developers write, debug, and optimize code faster.How the recipe adapts
The DynamicUIScroll primitive will be used to navigate through CodeFlow AI's IDE-like interface, demonstrating code generation in Python, debugging in JavaScript, and optimization suggestions in Go. CursorHighlightInteraction will precisely highlight syntax, error messages, and AI-generated code blocks. ContentGridReveal will be adapted to show a 'library' of supported languages and frameworks, sliding into view as the user explores. The overall aesthetic will maintain the clean, minimalist look, but with a color palette leaning towards dark mode themes common in developer tools. Typography will remain Grotesque Sans-serif for clarity in code snippets and UI labels. The fast-paced editing will emphasize the speed and efficiency gains CodeFlow AI provides.Remix blueprint · dynamic-ui-showcase
Scene durations (4 scenes, 24s)
Key Remotion components
Related Creative Tools Product Launches
Explore all Creative Tools launches →
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: