
Firecrawl ships an official Claude connector so agents can search the live web, scoring 94.7% on SimpleQA.
The Hook
“(No spoken dialogue — UI clicks and menu navigation are implied by visual changes.)”
Product Reveal
“(No spoken dialogue — a subtle 'connected' notification appears.)”
Feature Teaser
“(No spoken dialogue — visual cues indicate an AI agent is actively processing a request.)”
Call to Action
“(No spoken dialogue — the visual output of the AI agent is the focus.)”
Synthesizable in Remotion · key components of the firecrawl-ui-demo-template template.
A nested dropdown menu system that expands and collapses with a smooth, quick animation, revealing sub-menus and selectable options.
Utilize Remotion's 'interpolate' for opacity and Y-position transitions, combined with 'spring' for a subtle bounce effect on menu expansion. Manage state for active menu items and their children.
A search bar where text is typed character by character, followed by an immediate display of filtered results that slide into view.
Implement 'Sequence' for character-by-character text reveal. Use 'spring' for the search results container to slide up or fade in quickly once the typing sequence is complete.
AI-generated text appears rapidly, line by line, with a subtle typing cursor animation and a 'thinking' indicator that animates before results are displayed.
Combine 'Sequence' for line-by-line text appearance with 'spring' for the 'thinking' indicator's pulsating animation. Use 'interpolate' for a quick fade-in effect on each new line of text.
Purpose. Showcases the ease of finding and connecting Firecrawl within an existing AI agent platform.
Execution. Rapid navigation through menus, search, and a clear 'Connect to Claude' action.
Purpose. Confirms successful integration and briefly explains Firecrawl's capabilities.
Execution. A 'Connected to Firecrawl' notification and a detailed description panel for the connector.
Purpose. Demonstrates the AI agent leveraging Firecrawl for a complex research query.
Execution. Typing a query, 'thinking' indicators, and the agent initiating a search for research papers.
Purpose. Highlights the comprehensive and up-to-date research results provided by Firecrawl.
Execution. Fast-paced text generation revealing detailed, cited research papers, including recent entries.
Objective
Launch a new AI-powered code assistant called 'CodeWhisper' that integrates into VS Code.How the recipe adapts
The UIDropdownMenu primitive would adapt to show VS Code extension marketplace navigation. The SearchTypeahead primitive would demonstrate searching for 'CodeWhisper' in the extensions. The AITextGeneration primitive would be repurposed to show code suggestions appearing line-by-line within the editor, with a subtle 'thinking' spinner before the suggestion appears, and then a quick animation for accepting the suggestion.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.

Claude can now operate your Mac, opening apps, browsing and filling spreadsheets, as a research preview in Cowork and Claude Code.
Agentic CLI for coding, building apps, and automating workflows.