Interface animation
Figma — Figma Motion
Synchronize the motion preview with the timeline so the playhead position matches the object's state.
Video reference only; no editable project supplied.
Interface animation
Notion — Custom Agents
Tasks begin flowing neatly, then become crowded; agents take over and restore organized division of work, contrasting the problem with its solution.
Video reference only; no editable project supplied.
Interface animation
A product launch connected by blue light
Opening light introduces branching and publishing, the middle shows specific editing results, and the later section abstracts interface language into glass symbols. Blue serves as both selection state and a material motif throughout.
Video reference only; no editable project supplied.
Interface animation
Aesthetic design partner
The first section builds aesthetic expectations through different design dimensions, and the second explains how they are achieved through actual interactions
Video reference only; no editable project supplied.
Interface animation
IBM — watsonx
Alternate close-ups and full forms of the same filament material, unfolding product suffixes and capability words in groups that follow each shape.
Video reference only; no editable project supplied.
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
An information field focuses into research
Build a large oval from gray-purple and gray-green planes, with a task card near the central black dot. Gradually shrink the whole composition, revealing white circular openings outside while the black dot stays at frame center.
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
Material-shifting model mark
Preserve the same three-petal mark, switching internal materials first, then enlarging and shifting it on blue to make room for the product name and parameters.
Video reference only; no editable project supplied.
Interface animation
Butterfly — Pond
Use a garden and bee swarm as metaphors for computing: large text states the message while tiny colored process blocks remain active around it.
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
Cyera — Secure the unknown
Move from constructing logos, palettes and letterforms to brand applications, then connect webpages and messages through the same floating sphere.
Video reference only; no editable project supplied.
Interface animation
Layered interface journey
Use a sphere as a visual guide through layered webpages, forms and workflow spaces. Interfaces are composable planes with depth rather than mere screenshots.
Video reference only; no editable project supplied.
Interface animation
Connected customer worlds
Bring brand dots into human and everyday scenes, connecting customer stories through shared lines, red objects and positional handoffs.
Video reference only; no editable project supplied.
Interface animation
Several creative formats in one editor
Switch websites, whiteboards, portrait content and presentations within the same toolbar, using bottom thumbnails for navigation. Establish format coexistence before introducing specific new capabilities.
Video reference only; no editable project supplied.
Interface animation
Cashback offer mechanics
Coins emphasize the benefit, then a decreasing and replenished balance explains the cashback mechanism
Video reference only; no editable project supplied.
Interface animation
Cash App — Make Money Moves
Use a stable multi-cell grid for varied small loops, rotating messages only in the narrow right column to give rich assets a reading order.
Video reference only; no editable project supplied.
Interface animation
Domain dot transformations
Make the domain's dot the transition protagonist: split a long URL, expand the dot into geometric scenes, then land on a shorter industry suffix.
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
Creative Cloud
Carry one logo contour across creative media: design interface, graffiti, images and miniature landscapes. Preserve the central shape at every material change.
Video reference only; no editable project supplied.
Interface animation
A paper geometry system for knowledge work
Establish material through paper collage, continually recombining squares, circles and holes; introduce product cards around the central object to connect abstract graphics with projects, tasks and resources.
Video reference only; no editable project supplied.
Interface animation
Wonderful — $550M
Make the funding amount a visual event first, then explain growth through investors and global reach, returning to product positioning at the end.
Video reference only; no editable project supplied.
Interface animation
From constrained to open creation
Through a dark-to-light spatial journey, transform tightly packed interface and code regions into an open creative world to explore.
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
Perplexity — Comet
Keep navigation anchored at the top while only the central mask expands; separate internal imagery from container dimensions.
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 — Roundtrip between code and canvas
State the two-way workflow first, demonstrate the ecosystem's breadth with a horizontal tour of icons, and finally focus on the core tool.
Video reference only; no editable project supplied.
Interface animation
Figma — Connect Google Drive
Read external feedback, make design changes, then produce a document recording the reasons for those changes, completing a read/write loop.
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 — Design to implementation
Select annotated design frames first, then pass that selection context to the implementation agent; implementation results must correspond to the selected screens.
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
Connector-to-app cases
Multiple tool icons gather first, then become connector tags in the prompt field one by one
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 — Your agents. Now doing more.
The capability showcase has three sections: execution, model switching and connecting an existing subscription.
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
Business growth milestones
Attract attention with a large number first, then explain it in layers through time, curves and media screenshots
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
Creative plugin workflow
Select the plugin and skill before entering a cross-tool task, then reveal execution steps in order
Video reference only; no editable project supplied.
Interface animation
Multi-model API network
Connect one entry point to multiple models, then connect them to multiple product outputs
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
Demand becomes a desktop release
Layer similar requests from different directions with slight tilts, building a sense of demand.
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.
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
Animated media and iterative editing
Show a static request becoming an animated image first, then slide cards horizontally to expand the range of capabilities.
Video reference only; no editable project supplied.
Interface animation
Slide creation and variety
Give explicit course requirements first, then demonstrate completeness through a contents page, charts and exercise pages
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
Making-of Window Collage
Layer windows in sequence, with the central heading covering the top layer last; retain recognizable edges of surrounding content.
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
A character presents a payment card
The character looks toward the card as it rotates continuously around its vertical axis.
Video reference only; no editable project supplied.
Interface animation
A request and answer on the lock screen
Show the human request first, followed by the assistant's prepared result, using timing to express a response.
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
Prompt-to-result capability reel
Ask a question before showing the corresponding result for each capability, rather than playing outputs without context
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
Generated budget app walkthrough
Follow a short building section with a longer phone interaction to demonstrate the result's usability
Video reference only; no editable project supplied.
Interface animation
Mobile building launch
Establish context through growth first, then move the building entry point from computer to phone
Video reference only; no editable project supplied.
Interface animation
Missed call to assistant response
Use calls from multiple industries to establish the same problem in the opening, then present a single glowing sphere as the solution in the middle
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
Music library and creation
Focus on one song from an existing music library, then expand into more works through prompts and style tags
Video reference only; no editable project supplied.
Interface animation
Funding and product suite
Establish context with figures and endorsements before entering the actual product, giving each of three business lines its own visual system
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
Competition and rewards
Explain participation after announcing the event, then expand the mapping between rankings and rewards
Video reference only; no editable project supplied.
Interface animation
Regional odds exploration
Scatter separate state shapes before assembling them into a map, expressing a shift from noise to structured information
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
Code-driven agent operations
Follow abstract messages about code configuration with a running dashboard to demonstrate process observability
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 — Your data has answers
Introduce a question from existing data cards, then show query and report evidence after connecting the data source.
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 — Portable Computer
Arrange local tools in a ring around the device, with cloud models on a separate layer; connectors indicate escalation when needed rather than default data transmission.
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
From prompt to bulk CMS updates
Move from a keyboard close-up to a dark input field, then cut to the CMS table after typing finishes. Reveal blue outlines along table rows to show one request affecting multiple records.
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
An application grows into a system
Generate a customer dashboard from one input, then add an agent, external tools and file Q&A. Return to the same work object with each added capability, and pull back at the end to a network of multiple apps.
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
A computing scene dissolves into an emblem
Place the cloud above and devices below, connecting the layers with a glowing vertical line. Dim surrounding terminal information and retain a central vertical composition.
Video reference only; no editable project supplied.
Interface animation
A brand symbol becomes a chat tool
Raise and shrink a glowing shape from the bottom, then turn it into a send arrow; expand the input horizontally to move naturally from brand introduction into interaction.
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
Status words resolve into a wordmark
Rapidly change dim monospace status words, then cut to a dark double triangle. Fill the mark upward with green before unfolding the white brand wordmark.
Video reference only; no editable project supplied.
Interface animation
Recording opens into a multitrack arrangement
After the red record button activates, grow the waveform from left to right; cut to the sound list and expand into multiple colored tracks. Recording progress and playhead move in the same direction.
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
Connections become a large tool ecosystem
Orange capsules connect words such as connect and with, ending at a clickable plus. After clicking, stream icons along multiple arcs and increase the count to 450.
Video reference only; no editable project supplied.
Interface animation
A prompt becomes a branded presentation
Generate a cover, content and speaker notes after topic input, keeping thumbnails on the left throughout. Switch pages to show continuity in palette, typography and illustration language.
Video reference only; no editable project supplied.
Interface animation
A desktop tool shown through focused actions
Start each section with the full window, then push into the current area: session tree, terminal, device testing, rule settings or PR. Fix captions below the image to explain that section's action.
Video reference only; no editable project supplied.
Interface animation
Search, assess and hire one candidate
Show candidates after skill-criteria input, open details for interviews and transcripts, then proceed through hiring, introductions and payment. Connect all steps through the same candidate.
Video reference only; no editable project supplied.
Interface animation
Personal assistant tasks
Connect assistant capabilities through three everyday tasks: understand requirements from messages, show ongoing work, and pause separately at decisions that require the user.
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
Model availability announcement
Select the new model from an existing list and synchronize its name with the brand announcement area.
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
Outlined effect modules
Separate and reunite three notched effect buttons like interlocking modules, starting from the bottom item and preserving their tight vertical relationship.
Video reference only; no editable project supplied.
Interface animation
Graphic Cloud
Use brief cuts to show the logo moving from 3D slices to flat editing and silver-white material, with magenta linking all versions.
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
Search integration demo
Pose a specific question requiring external information, then show a search call and structured answer; summarize integration capability only at the end.
Video reference only; no editable project supplied.
Interface animation
Software factory overview
Break software production into stages first, then enter a metrics workbench in the same order. Every opening stage word must have a counterpart in the actual interface later.
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
From individuals to interactions
Use one fruit poster to represent an individual, then pull back into many differentiated samples; let particles cross poster boundaries to tell a story from individuality to interaction.
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
Prime Intellect — PRIME-AGENT
Introduce product mechanisms through code and states, then conclude with task results and summary figures.
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
Wabi — A new kind of messenger
Let information in chat progressively become usable mini-apps, then assemble those apps into a personal homepage.
Video reference only; no editable project supplied.
Interface animation
Whop — Move your balance
Change account composition through one balance transfer, then expand the product explanation with charts and a funding menu.
Video reference only; no editable project supplied.
Interface animation
Z.ai — Sketch = Code
Keep input materials and generated results visible together, using sketches, images and screen recordings to demonstrate distinct visual-input capabilities.
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 × Gemini
Connect a data source to the conversation through one enable action: open the menu, enable the connector, ask a source-specific question, then end with both brands.
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.