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
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
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.
Graphic animation
Radial identity burst
Instantly unfold a colorful geometric world from fine contours in darkness, then gather everything back into the central mark.
Video reference only; no editable project supplied.
Graphic animation
An evolving web network
Explain network changes through node organization: open connections, new visitors, growth from one visit to large-scale traffic, then contraction into an index mark.
Video reference only; no editable project supplied.
Graphic animation
Figma — Make-a-thon
Center the two brands as participant bubbles enter from the edges; collective responses lead into the event announcement.
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.
Text animation
Figma — MAKEATHON
Establish the event's identity through patterns and lettering at the start, quickly demonstrate participant outcomes with artwork in the middle, and announce the launch at the end.
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
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
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
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
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
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.
Live-action editing
Macro Match-cut Rhythm
Match similar geometry such as arcs, rings and pointers across shots; these are different assets, not a single object's trajectory.
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
Mail tasks become actions
Advance each chapter through email context → interaction → result, maintaining subject and recipient continuity.
Video reference only; no editable project supplied.
Text animation
A new identity assembled from particles
Disintegrate the old text into particles, let them flow directionally, then reassemble them into the new name.
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
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
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
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
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
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
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
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
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.
Graphic animation
Playful Cloud
Use orange-yellow as the thread through rapid cuts between hand-drawn, liquid, flexible-tube and flat floral styles, with the curved contour connecting all materials.
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
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.