Interface animation
Enterprise agent workflows
Expand one input into cross-department workflows. Connect task cards, people and data sources with lines, then return results to a readable interface.
Video reference only; no editable project supplied.
Interface animation
Xiaomi — HyperOS
Move from material close-ups into a phone interface, then extend the same rounded corners and transparent layers to icons, widgets and multiple devices.
Video reference only; no editable project supplied.
Interface animation
Figma — Draw inspiration
Present the artwork first, then show how control points and parameters change it; each feature must have a visible before-and-after difference.
Video reference only; no editable project supplied.
Interface animation
Prompt-to-website launch
Use two rounds of specific requests to demonstrate scope: show the full prompt first, enter a scrollable website result, then unfold multiple designs into a spatial mosaic.
Video reference only; no editable project supplied.
Interface animation
Collaboration across devices
Move the same work among desktop, tablet and phone, carrying documents, charts and collaborators through transitions before condensing into a branded paper plane.
Video reference only; no editable project supplied.
Interface animation
Linear — At your command
Move an angled camera between the project and agent, using documents and relationship diagrams as evidence for the answers.
Video reference only; no editable project supplied.
Interface animation
Zapier — OFF → ON
Use an uncontrollably duplicating desktop to represent busywork, then let one switch organize all the noise into a few completed workflows.
Video reference only; no editable project supplied.
Interface animation
Five components in one viewport
Keep the purple outline and component names fixed to make five rapid demonstrations feel like one toolkit. Change only internal objects between segments, not the presentation stage.
Video reference only; no editable project supplied.
Interface animation
Figma — Bring code to the canvas
The code-generated interface becomes a canvas object, placed beside design variants for comparison; it remains the same code layer after updates.
Video reference only; no editable project supplied.
Interface animation
Figma — Agents on the canvas
Make suggestions, apply styles and expand content for the same product; do not treat each result as an unrelated artwork.
Video reference only; no editable project supplied.
Interface animation
Figma — Figma in Weave
Turn a design frame into a connectable node, connect text and images to their respective slots, then branch the output into different use cases.
Video reference only; no editable project supplied.
Interface animation
Figma — Specs
Bring business, design and code evidence together in a document, use comments to drive reorganization, and finally turn it into an actionable implementation handoff specification.
Video reference only; no editable project supplied.
Interface animation
Figma — Generate, edit, animate
Newly generated assets remain selectable, editable in color and animatable; demonstrate editability through these three stages.
Video reference only; no editable project supplied.
Interface animation
Figma — Image editing
Present every example as selection → operation → result; highlighting the subject is only an intermediate state.
Video reference only; no editable project supplied.
Interface animation
Linear — Loops
A glowing point activates action labels sequentially along a loop; each complete loop represents one workflow.
Video reference only; no editable project supplied.
Interface animation
Linear — Product development system
Multiple task branches converge into a shared main path; pulling the camera back turns local relationships into a complete network.
Video reference only; no editable project supplied.
Interface animation
Linear — Loops
Quickly list trigger conditions first, then explain output actions along the track; give triggers and results separate sections.
Video reference only; no editable project supplied.
Interface animation
Linear — Custom environments
Present dark cards one at a time in angled close-ups, keeping each environment's fields connected within its card.
Video reference only; no editable project supplied.
Interface animation
Linear — Engineering meeting prep
Select weekly recurrence before showing the weekday multi-select, then set the time; after completion, summarize the rule in natural language in the overview.
Video reference only; no editable project supplied.
Interface animation
Linear — Queued
This short clip contains only a local hover interaction: the main status stays unchanged, hovering reveals the elapsed waiting time, and moving away hides it.
Video reference only; no editable project supplied.
Interface animation
Linear — Experience the diff
Select a change before viewing its diff, anchor the comment to a code line, and explicitly submit the review at the end.
Video reference only; no editable project supplied.
Interface animation
Linear — Coding sessions on mobile
Keep code context above and the input and on-screen keyboard below; after submission, the keyboard exits and a processing state takes its place.
Video reference only; no editable project supplied.
Interface animation
Collaborative chat building
Messages from different speakers enter the same thread, and the assistant responds after the request
Video reference only; no editable project supplied.
Interface animation
Question-to-proof reveal
Open with skepticism to create an information gap, switch to the website to verify it firsthand, and return to the original post with a reply at the end
Video reference only; no editable project supplied.
Interface animation
Import source carousel
Foreground websites switch through a horizontal queue while the bottom input position stays fixed
Video reference only; no editable project supplied.
Interface animation
Notion — External Agents
The same task card persists while its status changes through Triage→Plan→Build→PR→Ship.
Video reference only; no editable project supplied.
Interface animation
Notion — Turn your best work into a skill
Team sharing and local export are two distribution paths, each explained through a dialog before converging on usage.
Video reference only; no editable project supplied.
Interface animation
Notion — Edit skills together
The same skill moves from document editing to repository synchronization to use by multiple agents, retaining its identity across containers.
Video reference only; no editable project supplied.
Interface animation
Notion — Notion Skills
Quickly switch between multiple agent names to establish compatibility, then demonstrate it through a complete export and invocation.
Video reference only; no editable project supplied.
Interface animation
Notion — Company Home
Unfolding increases the visible body area, with a parent-child clipping relationship between sidebar and body.
Video reference only; no editable project supplied.
Interface animation
Notion — Notion as code
Enter the requirement before showing execution and code, then switch to the actual workspace result after deployment confirmation.
Video reference only; no editable project supplied.
Interface animation
Motion design workspace
Keep the canvas visible alongside the timeline and instruction area below it throughout, showing how production elements relate
Video reference only; no editable project supplied.
Interface animation
Legal work across connected tools
Show multiple plugins through repeating message → interaction → evidence units; keep the current tool identity at the upper right.
Video reference only; no editable project supplied.
Interface animation
Review before sending
After finding a to-do item, show a suggestion, let the user edit and confirm it, then show the target chat receiving the message.
Video reference only; no editable project supplied.
Live-action editing
A cast of voices
Repeated lateral movement finds different phone groups, introducing voices like a cast roll call.
Video reference only; no editable project supplied.
Interface animation
Code becomes a shared document
Show the coding task first, then request that the code be organized into a document; open the result to verify cross-application delivery.
Video reference only; no editable project supplied.
Interface animation
Reusable skill library
A successful conversation first becomes a skill entry, then joins a list of skills that can be enabled
Video reference only; no editable project supplied.
Interface animation
Conversation branching
Show the historical point that can be branched before copying the shared context
Video reference only; no editable project supplied.
Interface animation
Wide parallel research
Split one input into multiple task panels, unfolding them horizontally in depth to express parallel execution
Video reference only; no editable project supplied.
Interface animation
Trigger and action
Show conditions and actions in pairs, and execute only after both are filled in
Video reference only; no editable project supplied.
Interface animation
Website-to-desktop app
Detach the same website from the browser frame into an independent window, preserving content identity
Video reference only; no editable project supplied.
Interface animation
Chat-to-generated result
Keep the assistant within the original chat container and return a result card after assets are sent
Video reference only; no editable project supplied.
Interface animation
Cloud computer workflow
Explain the persistent execution environment first, then prove it through three examples: bots, scraping and deployment
Video reference only; no editable project supplied.
Interface animation
Recurring task calendar
Start with the calendar's overall distribution, then push in on one task to explain its settings
Video reference only; no editable project supplied.
Interface animation
Foldable device continuity
Keep the same task visible as device width changes rather than switching to a new task
Video reference only; no editable project supplied.
Interface animation
Scan to Suggested Fix
Preserve the full entry → scan → issues → fix → PR sequence, revealing deeper result levels as it progresses.
Video reference only; no editable project supplied.
Interface animation
A workspace for multiple coding sessions
Expand the main window first, then grow it from one column into side-by-side preview and code; panels remain child layers of the same workspace.
Video reference only; no editable project supplied.
Interface animation
Conversational Design Workflow
Let the user enter their intent first, show the result next, then demonstrate local edits and export; the result must appear after the submit action.
Video reference only; no editable project supplied.
Interface animation
Proactive Assistant Conversation
Establish agent capabilities through proactive reminder → user authorization → task result rather than simply scrolling chat.
Video reference only; no editable project supplied.
Interface animation
Voice Circle Reveal
Expand the same central circle from a button into an image window, then contract it back into a button, preserving spatial identity.
Video reference only; no editable project supplied.
Interface animation
Phone to Desktop Handoff
Complete each task through phone request → desktop execution → phone confirmation, repeating this structure three times with progressively developing content.
Video reference only; no editable project supplied.
Interface animation
Connected Tools Evidence Chain
Carry a business question through multiple tool calls: data explains what happened, workflows explain why, and slides support sharing.
Video reference only; no editable project supplied.
Interface animation
Gather scattered agents
The character pulls scattered terminals together, expressing multiple tasks entering a single view.
Video reference only; no editable project supplied.
Interface animation
One topic across documents and designs
Derive multiple design sizes from slides with the same jacket theme, then turn them into a document, preserving content identity across formats.
Video reference only; no editable project supplied.
Interface animation
From a wish to a budget
Establish a specific life aspiration first, assess its feasibility through data, then return to the life outcome.
Video reference only; no editable project supplied.
Interface animation
Three features arrive
Each feature consists of a main card and a small attached feedback element.
Video reference only; no editable project supplied.
Interface animation
Mail tasks become actions
Advance each chapter through email context → interaction → result, maintaining subject and recipient continuity.
Video reference only; no editable project supplied.
Interface animation
A search box for fuller intent
Expand a short search bar into a multiline question field, expressing a shift from keywords to complete intent.
Video reference only; no editable project supplied.
Interface animation
Search for available services
The question includes a task and time constraints, and results address each constraint in turn.
Video reference only; no editable project supplied.
Interface animation
A configured assistant becomes a template
Carry the same assistant name and avatar through settings, the public page and the recipient's view.
Video reference only; no editable project supplied.
Interface animation
Sources become a summary
Show the multiple retrieved sources first, then condense them into a thematic summary.
Video reference only; no editable project supplied.
Interface animation
User input resumes an agent task
The agent hands control to the user only when authentication is encountered; the workflow resumes after user input.
Video reference only; no editable project supplied.
Interface animation
Speech leads to an artifact
Attach the voice overlay to the phone, then move from the response to a specific task and document.
Video reference only; no editable project supplied.
Interface animation
A briefing becomes a voice note
Specify content and time first, then add the output format and turn the result into a voice card.
Video reference only; no editable project supplied.
Interface animation
Project memory across sessions
Explain cross-session memory through three states: recording → browsing → later retrieval.
Video reference only; no editable project supplied.
Interface animation
From prompt to a published app
Demonstrate actual interaction after generation first, then switch to desktop to show another type of publishable application.
Video reference only; no editable project supplied.
Interface animation
One task across phone and desktop
The phone sends one task, and the desktop progressively searches, finds a local document, edits it and sends it.
Video reference only; no editable project supplied.
Interface animation
Browser actions beside agent feedback
Place browser actions and terminal feedback side by side to show the correspondence between the agent's plan and page results.
Video reference only; no editable project supplied.
Interface animation
Code is tested by a visible simulation
Show specific constraints first, then explanations and code, and finally the running results side by side.
Video reference only; no editable project supplied.
Interface animation
A release told in product chapters
Open each chapter with a pixel symbol and short phrase, then illustrate it with one product action.
Video reference only; no editable project supplied.
Interface animation
Four-app parallel showcase
Place four equal-height phones side by side on a shared background, with each progressing independently
Video reference only; no editable project supplied.
Interface animation
Structured transcription features
Introduce measurement dimensions first, then explain capabilities through specific text changes
Video reference only; no editable project supplied.
Interface animation
Controllable song composition
Move from an open-ended request to controllable sections, tempo and key, ending with the waveform and finished piece
Video reference only; no editable project supplied.
Interface animation
Prompt-to-media workflow
Convert natural language into node dependencies first, and make output nodes wait for upstream assets to finish
Video reference only; no editable project supplied.
Interface animation
Perpetual order workflow
Push from the terminal overview into the action form, then fill in amount, leverage and risk conditions in order before submitting
Video reference only; no editable project supplied.
Interface animation
Binary market interaction
Pose the judgment question first, then focus the complex terminal into a two-choice interaction
Video reference only; no editable project supplied.
Interface animation
Compressed countdown flow
After form selection, compress the countdown through jumps, showing the claim action only when it reaches zero
Video reference only; no editable project supplied.
Interface animation
Agent-controlled simulator
Keep the agent on the left and simulator on the right in the same view, with results occurring inside the controlled app
Video reference only; no editable project supplied.
Interface animation
Repository lifecycle
New-repository and sync entry points lead to the same repository list, then PR review
Video reference only; no editable project supplied.
Interface animation
Concurrent task conversation
Add multiple tasks to the same session, with a fixed work-item panel showing the parallel task count
Video reference only; no editable project supplied.
Interface animation
Annotated visual editing
Attach annotations to target elements, keeping numbers and comments in one-to-one correspondence
Video reference only; no editable project supplied.
Interface animation
SDK code and terminal
Write code progressively, then shrink it into the left column while the terminal on the right executes the same configuration
Video reference only; no editable project supplied.
Interface animation
Recursive agent orchestration
Top-level planning creates tasks, which branch further into subplans and worker nodes
Video reference only; no editable project supplied.
Interface animation
Design-system component creation
Inspect the existing design system and variables before creating artboards, rather than freely drawing a similar-looking image
Video reference only; no editable project supplied.
Interface animation
Tablet creation and review
Show the same result across devices first, then focus on organization and review capabilities on the tablet
Video reference only; no editable project supplied.
Interface animation
Performance and recovery comparison
Start both groups simultaneously but advance them at different speeds, with the new workflow showing results first
Video reference only; no editable project supplied.
Interface animation
Agent feature update cadence
Present each feature as a one-sentence message on black followed by a short interaction on white, maintaining a regular rhythm
Video reference only; no editable project supplied.
Interface animation
Prompt, preview and publish
Show available repositories first, then emphasize starting from scratch; reveal the preview only after input
Video reference only; no editable project supplied.
Interface animation
Phone-to-desktop agent sync
Authorize pairing first, then show the same message and result at both ends
Video reference only; no editable project supplied.
Interface animation
Live app publishing
Complete infrastructure-building steps one by one before revealing the app preview
Video reference only; no editable project supplied.
Interface animation
Perplexity — Explore your answers visually
Results include interactive charts whose data tooltips respond to the pointer, rather than merely scaling the entire chart.
Video reference only; no editable project supplied.
Interface animation
Perplexity — Automate anything
Separate event triggers and scheduled triggers into two complete examples, each with condition → execution → output.
Video reference only; no editable project supplied.
Interface animation
Perplexity — Projects in Computer
Files and multiple tasks belong to the same project rather than appearing as unrelated floating cards.
Video reference only; no editable project supplied.
Interface animation
Perplexity — Run tasks locally
Show the execution location before running the task, then demonstrate local operation through a result report and to-do list.
Video reference only; no editable project supplied.
Interface animation
Perplexity — Model Council
Branch the same question to multiple models, then merge completed answers into a comparison table; do not reduce this to three serial steps.
Video reference only; no editable project supplied.
Interface animation
Perplexity — Computer
Use the same task entry point for different output types, with successive examples demonstrating breadth.
Video reference only; no editable project supplied.
Interface animation
Perplexity — Deep Research
Delegate the research request to subtasks, with the report following retrieval; present conclusions separately from sources.
Video reference only; no editable project supplied.
Interface animation
Perplexity — Computer for Counsel
Establish the domain, show input and sources, then provide three specific business outputs.
Video reference only; no editable project supplied.
Interface animation
Perplexity — Computer works wherever you do
Trigger the task by email and return results to the same thread; attachments are input dependencies.
Video reference only; no editable project supplied.
Interface animation
Perplexity — Introducing hybrid
Inspect sensitive information before choosing a local or cloud path, giving the two execution locations explicit responsibilities.
Video reference only; no editable project supplied.
Interface animation
Perplexity — Portable Computer
Complete installation progress before showing the local tool network; require confirmation before cloud escalation.
Video reference only; no editable project supplied.
Interface animation
Perplexity — Effort controls
Increase one slider through levels, synchronizing the level name, model description and fill length.
Video reference only; no editable project supplied.
Interface animation
Apple — Send a message
Search terms trigger a suggestion list; selecting an action collapses the list and turns the capsule into a parameterized command.
Video reference only; no editable project supplied.
Interface animation
Apple — Across devices
Phone text is the input source and the computer document the destination; changes focus on text selection and pasting while device frames remain largely stable.
Video reference only; no editable project supplied.
Interface animation
Teach the agent a reusable style
Open by typing font and quotation-mark rules into the input field, then show completed pages so viewers understand the rules affect the full page set.
Video reference only; no editable project supplied.
Interface animation
A focused template carousel
Arrange three templates horizontally, showing the center card fully and only dimmed portions of the side cards. Slide the entire track horizontally when switching, restoring center-card brightness only after it settles.
Video reference only; no editable project supplied.
Interface animation
An agent payment with human approval
Install and connect the agent first, then request an itinerary change in chat, show the cost and move to phone confirmation. Repeat the cost and merchant name across interfaces to identify the same request.
Video reference only; no editable project supplied.
Interface animation
A treasury workflow in floating panels
Move from a notification into the balance, then send a payment, create a card and perform chat actions before returning to the overview. Center only one action panel at a time, handing off to the next scene after confirmation.
Video reference only; no editable project supplied.
Interface animation
A stable name for changing models
Explain the capability in one sentence, then show a task-to-model mapping table or command. Avoid consecutive explanatory sentences; follow each concept immediately with a concrete usage example.
Video reference only; no editable project supplied.
Interface animation
Drop an image into a note
Let the full checklist be read first, then drag an image from the right side of the desktop below the note. Make the file follow the cursor; on release, expand the image and increase the note window's height with its content.
Video reference only; no editable project supplied.
Interface animation
A multi-feature workspace launch
Present workflows, team chat, meetings, mobile voice and the browser assistant in separate sections. Use a consistent short-heading-then-interface rhythm, re-establishing the scene when changing capabilities.
Video reference only; no editable project supplied.
Interface animation
The web becomes structured input
Stacked webpages represent input complexity, with orange modules connecting the flow to structured content. Match webpages and code through adjacent or consecutive shots to make input-output relationships readable.
Video reference only; no editable project supplied.
Interface animation
From a brand URL to an ad family
After link input, gather surrounding posters into logos, colors, fonts and product assets. Products enter a combination ring, and the ad matrix unfolds only after the count rises.
Video reference only; no editable project supplied.
Interface animation
A collaborative graph writes its own title
Multiple colored cursors trace letter curves, leaving black node endpoints on the glyphs. Collapse the completed heading into one empty node to connect the visual metaphor to actual interaction.
Video reference only; no editable project supplied.
Interface animation
Two requests turn a sketch into animation
The first request turns a sketch into a character sheet, and the second turns that result into animation. Scroll the chat upward as new results enter from below, retaining the connection to the previous message.
Video reference only; no editable project supplied.
Interface animation
An unfolding device changes the note layout
Bring a portrait phone into the center, rotate and expand it into two landscape columns; keep the list on one side and move details into the other. Carry the same note content across both aspect ratios.
Video reference only; no editable project supplied.
Interface animation
One product across a complete launch kit
Show the final product page first, then return to the request, extract palette and product, generate scenes and sizes, and finally demonstrate motion capabilities. The same speaker recurs across outputs.
Video reference only; no editable project supplied.
Interface animation
One conversation produces several formats
After requesting a coffee website, ask for a presentation and launch graphics. All three outputs share photography, a brown palette and serif headings, demonstrating context reuse through content consistency.
Video reference only; no editable project supplied.
Interface animation
Payment-to-reporting montage
Expand related business functions from a payment card, then move into bills and reports, connecting the same expense across views.
Video reference only; no editable project supplied.
Interface animation
Personal-to-enterprise intelligence
First show the assistant understanding a personal task, then expand personal preferences into enterprise relationships among people, projects and data.
Video reference only; no editable project supplied.
Interface animation
Template browsing and remixing
Show the range of available templates, enlarge one complete browsable website, then use a prompt to adapt it to another business.
Video reference only; no editable project supplied.
Interface animation
Reusable skills in a builder
Turn repeated requirements into an invocable skill, using one palette change to prove it actually affects the page.
Video reference only; no editable project supplied.
Interface animation
Agent-assisted motion editing
Pair each instruction with its canvas change: remix a template, arrange dots, offset tracks, then expand into different sizes and languages.
Video reference only; no editable project supplied.
Interface animation
Product acceleration workflow
Carry one product project through goals, research, design and development. Preserve its name or key question at every view change so the long video reads as one advancing workflow.
Video reference only; no editable project supplied.
Interface animation
Review triage
Show the burden of queues and review reminders first, then turn the list into a board ordered by urgency, recent changes and progress. Orange continuously tracks the item needing attention most.
Video reference only; no editable project supplied.
Interface animation
Appointment chat loop
Explain the assistant's value through one complete booking exchange: the user requests a time, the assistant offers two options, and the user confirms one.
Video reference only; no editable project supplied.
Interface animation
Model inspection workflow
Make model inspection a research process viewers can follow: establish the subject and dataset, confirm the inspection plan, then present findings and the next experiment.
Video reference only; no editable project supplied.
Interface animation
Agent service marketplace
Expand from one person to a group of agents, then enter service selection and fulfillment. Carry purple blocks through people, directory and selected states to preserve one action thread.
Video reference only; no editable project supplied.
Interface animation
Research to decision table
Start with a business question, break it into queryable facts, then assemble facts into an actionable table. Orange marks only the question focus and final priority.
Video reference only; no editable project supplied.
Interface animation
Airtable — Create an app
Show app generation through side-by-side requests and results, then bring attachment updates and other business examples into the same structure.
Video reference only; no editable project supplied.
Interface animation
Airtable — Custom interfaces
Demonstrate customization through multiple interactive interfaces, ending each example with clear feedback.
Video reference only; no editable project supplied.
Interface animation
Cash App — Bank on Cash App.
Connect benefits through the same phone, using black, gray and fluorescent green background changes for section rhythm.
Video reference only; no editable project supplied.
Interface animation
Telegram — Create your agent
Use one fixed phone to complete bot creation, testing and profile viewing, connecting states through click feedback.
Video reference only; no editable project supplied.
Interface animation
Beautiful.ai — Build your presentation
Turn a topic into an editable outline, then the outline into a complete slide set, giving each generation step a clear result.
Video reference only; no editable project supplied.
Interface animation
Descript — Create social clips
Frame one video-editing request as an explicit asset handoff: select a preset, supply video, confirm layout, supply brand guidelines, then show results in two ratios.
Video reference only; no editable project supplied.
Interface animation
QuiverAI — Arrow 2.0
Demonstrate vector generation's value at three scales: editable paths, work categories and real applications, then return to generating stylistically consistent variants.
Video reference only; no editable project supplied.
Interface animation
Rive — Interactive motion
Demonstrate interaction through works that genuinely change state, with games, controls, design systems and a sequencer each showing one clear action.
Video reference only; no editable project supplied.
Interface animation
Supabase — Explorer & Notebooks
Open the product through a growth chart, then demonstrate queries, saving, natural language and local workflows in turn, keeping short phrases beside the feature being shown.
Video reference only; no editable project supplied.
Interface animation
Supabase — Supabase Pipelines
Visualize traffic pressure first, then explain division of responsibilities through destination configuration and continuous synchronization, giving the product a clear cause and effect.
Video reference only; no editable project supplied.
Interface animation
Dub — Partner referrals
Move from a launch object to one partner's earnings, then expand to the full recruitment funnel and detailed analysis, using an individual result to introduce product data.
Video reference only; no editable project supplied.
Interface animation
Embedded assistant
Connect questions, answers and sources through one lightweight entry point, integrating the assistant naturally into the existing page.
Video reference only; no editable project supplied.