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
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
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.
Text animation
A sentence drawn by glass light
Fix the heading on the central axis and reveal it word by word; extend a narrow glass strip from left to right, with the brightest point crossing the heading slightly later.
Video reference only; no editable project supplied.
Text animation
Material-to-wordmark reveal
Extract a C from an enlarged iridescent surface, condense the spatial form into one letter, then unfold the full brand name along the same baseline.
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 — 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
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
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
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 — 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
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
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.
Text animation
Triptych on an Arc
Keep the three column positions fixed while changing internal textures and L-shape orientations in discrete steps; switching assets does not mean translating the entire tile.
Video reference only; no editable project supplied.
Text animation
Installing the product name
Reveal the product name letter by letter only after the character reaches the sign, establishing cause and effect between movement and letters.
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
Three features arrive
Each feature consists of a main card and a small attached feedback element.
Video reference only; no editable project supplied.
Graphic animation
Search categories in a point cloud
Reconfigure dots into people, places and objects in sequence, with colors following the categories.
Video reference only; no editable project supplied.
Graphic animation
A partnership on flowing color
Keep both brands aligned and fixed while the background flows continuously without competing with the text.
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.
Text animation
A voice announcement over moving color
Keep the heading's position and size fixed, with motion coming primarily from the continuously flowing background.
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
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
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
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
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
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 — 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.
3D animation
Two glowing windows
Fix the front window at the upper right and the rear window at the lower left, with matching perspective directions. Collapse the rear window to a point before expanding it along a diagonal axis.
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.
Text animation
A people search becomes a directory
Introduce avatars around the central heading in sequence, with similar sizes and short identity labels. Keep the heading on two lines and color the brand's line orange.
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.
3D animation
A keycap turns into voice typing
Drop logo and letter keycaps into a row, then scatter them sideways to reveal a glowing black waveform capsule. The capsule becomes a shared anchor for subsequent demonstrations.
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
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.
Live-action editing
Movement reveals patterned glass
Keep the glass fixed as hands and containers pass behind it; the fine grid splits contours into offset segments. Wide shots establish the frame, while close-ups clarify the relationship between texture and distortion.
Video reference only; no editable project supplied.
Text animation
Kinetic manifesto 60s
Make copy the protagonist: enlarge, squeeze in and connect short words according to semantic emphasis, using diamonds to push text sections into the next color group.
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
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.
Graphic animation
Revolut — EURR
Exchange two coins' front-back positions along one tray, keeping text fixed so motion is concentrated between the two subjects.
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
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.