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
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.
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.
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.
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.
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
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
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.
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.
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
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
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
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
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
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
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.
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
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.
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
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.
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
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
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.
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
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
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.
Text animation
Resend — INBOXES
Push a quiet dark inbox into the foreground, then complete the launch reveal with a giant heading and backlight.
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
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.