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
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
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.
Text animation
Figma — Q2 Highlights
Keep feature windows in the foreground and oversized text texture in the background; do not merge these layers.
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
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.
Text animation
Kinetic manifesto 15s
Retain five emphases within fifteen seconds: greeting, stance, music, creators and listeners; let viewers read one word group at a time.
Video reference only; no editable project supplied.
Text animation
Ink becomes networks and knowledge
Turn written strokes into discrete points, then form multiple network structures and extend them into a knowledge atlas.
Video reference only; no editable project supplied.
Text animation
A frontier horizon
Keep the main background moving slowly while replacing copy at the same position.
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.
Text animation
A flight through sun and moon
Start the forward movement with radially stretching stars to establish speed, then let the sun and crescent moon take over the center in sequence.
Video reference only; no editable project supplied.
Text animation
Information fragments resolve into intelligence
Fill the first half with letters, strips and geometry of varied sizes; after the whole composition shrinks, move fragments toward the central word's baseline. Stagger outgoing elements and incoming letters.
Video reference only; no editable project supplied.
Text animation
Figma — Q1 2026
Pack oversized lettering of different widths tightly with color blocks, using cropped edges to create density; keep the bottom information strip fixed.
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 — 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 — 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
Import source carousel
Foreground websites switch through a horizontal queue while the bottom input position stays fixed
Video reference only; no editable project supplied.
Text animation
Orbiting brand shapes
The heading remains largely fixed while soft shapes of different scales float and rotate around it
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 — 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.
Graphic animation
Notion — Any tool. Any agent.
Desktop backgrounds and surrounding apps change rapidly while the core icon remains recognizable; finally, all other elements exit, leaving only the brand.
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
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
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.
Text animation
Multi-material Numeral
Establish an atlas context first, then let different media share the silhouette of the number 5; recognition relies on a stable shape rather than fixed texture.
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.
Graphic animation
An editable photo-mosaic numeral
Photo tiles form a number together, and nonuniform scaling changes its overall aspect ratio while internal tiles follow the parent transform.
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
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
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
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
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
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
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
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 — 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 — 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
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.
Text animation
A serif typeface as an engineering specimen
Enter a blue technical drawing through a triangular mark, then enlarge a single letter outline. Fine lines, dimensions and control points explain stroke structure without overpowering the glyph.
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
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
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.
Text animation
A continuous zoom demonstrates vector clarity
Push from the full poster into a planet, then a curve on its yellow outline. Keep increasing magnification while edges remain smooth, anchoring the zoom on the same detail.
Video reference only; no editable project supplied.
Text animation
A large version reveal becomes a toggle
Place V above and 6 below, with orange edges and pink interiors creating layered gloss. Keep the central brand name small and stable, revealing the control only after the version letters exit upward and downward.
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
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.
Text animation
Countdown numeral system
Count down through three large numerals, then pull back into a nine-cell set, showing a shared family of angular strokes and rounded corners.
Video reference only; no editable project supplied.
Graphic animation
Creative Variations
Cycle one logo through creative styles, from fine lines, metal and flowers to image collage, using a unified position and negative space to make one series.
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.
Text animation
Luminous product announcement
Reveal a new product name with a green light sweep, keeping transparent layers and dark aurora restrained; finally turn the name into two short promises.
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
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
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.
Text animation
IBM — think
Bring 3D letters from scattered orientations into one reading direction, then hold a quiet wordmark after the brief assembly.
Video reference only; no editable project supplied.
Graphic animation
Uber — PLAN ON A GOOD TIME
Slide and flip repeated suitcases around a fixed short phrase, keeping the travel message readable within a continuous pattern.
Video reference only; no editable project supplied.
Graphic animation
Uber — Refill your wallet
Borrow the act of refueling for a wallet: aim the nozzle, let coins flow in and fill the wallet, using the action itself to explain topping up.
Video reference only; no editable project supplied.
Graphic animation
Bluevine — bluevine
Show the wordmark's geometric construction first, then turn curved modules into standalone symbols and app icons.
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.
Text animation
Gradient brand statements
Carry three messages on slowly flowing color fields, briefly breaking letterforms only between sentences.
Video reference only; no editable project supplied.