
Your app can now pick up a design from a URL. Paste it into Base44 and it just… adapts. We also added a full asset library and app-wide theme controls. Fonts, colors, everything.
The Hook
“(No spoken dialogue — The track begins with a sustained, evolving pad sound, creating an atmospheric and slightly mysterious mood. At [00:09], a subtle, high-frequency riser begins, building tension. This culminates in a significant sub-bass drop/impact at [00:11].)”
Product Reveal
“(No spoken dialogue — A rhythmic, pulsing synth bass and a driving, arpeggiated synth melody begin. Another high-energy riser starts at [00:21], leading to a more pronounced sub-bass impact and a broader, more open synth sound at [00:23].)”
Feature Teaser
“(No spoken dialogue — A distinct sweep effect is heard at [00:34], transitioning into a more intense, layered synth texture with a faster arpeggio. A final, powerful riser builds from [00:45] to [00:48].)”
Call to Action
“(No spoken dialogue — A grand, sustained synth chord and a deep sub-bass impact signify a climax. The track then slowly fades out with ambient synth pads.)”
Synthesizable in Remotion · key components of the base44-design-adapt-launch template.
A user pastes a URL, and the system instantly processes it, extracting design elements and generating a new application interface that visually adapts to the source URL's aesthetic. This is shown through a modal input, a loading state, and then a full UI reveal.
Use `interpolate` for modal opacity and scale. Implement a `spring` animation for the UI elements appearing after the 'Add' button click. Utilize `Sequence` and `AbsoluteFill` for scene transitions. SVG filters for subtle blur/glow on loading states.
Images and assets are replaced in real-time within the application preview. A file selection modal appears, an asset is chosen, and the corresponding image on the live preview updates instantly with a smooth transition.
Employ `spring` for the image replacement animation, ensuring a natural bounce. Use `measureText` for dynamic text resizing if needed. Implement `AbsoluteFill` for the modal overlay and `interpolate` for its entrance/exit.
A theme panel allows users to change colors and fonts. As a color or font is selected, the entire application interface updates in real-time, demonstrating global style changes with smooth visual feedback.
Utilize `interpolateColor` for smooth color transitions across the UI. For font changes, use `spring` for a subtle scale/fade effect on text elements. Implement `Sequence` to orchestrate multiple property changes simultaneously.
Purpose. Introduce the core problem: the difficulty of translating design inspiration into a functional app.
Execution. Starts with a generic e-commerce site, then transitions to the Base44 interface asking 'What will you build next?'
Purpose. Demonstrate the unique URL-to-app design adaptation feature.
Execution. User pastes a URL, selects 'Design only', and Base44 instantly generates a new app based on that design, showcasing the AI's power.
Purpose. Showcase the ease of customizing assets and global themes.
Execution. User uploads new images, replaces existing ones, and then changes the app's primary color and font, with real-time updates.
Purpose. Present the fully customized, high-quality application.
Execution. A final, sweeping view of the polished application, highlighting its responsiveness and aesthetic appeal, reinforcing the product's value.
Objective
A user wants to create a 'Recipe Sharing App' using CodeCanvas.How the recipe adapts
The video would start with a user typing 'Create a recipe sharing app with user profiles and ingredient search' into CodeCanvas. A loading animation would show the AI processing. Then, a full-stack application UI would appear, demonstrating generated code components like a recipe card and search bar. The user would then interact with a 'Theme' panel to change the app's primary color to a warm orange and switch the font to a friendly sans-serif, with the entire app updating instantly. Finally, the user would drag and drop a new 'Featured Recipe' image, showcasing the dynamic asset swap. The camera would follow these interactions closely, ending with a polished view of the customized recipe app.Scene durations (4 scenes, 63s)
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: