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.
Text animation
Linear — Orbit
Pull back from letterform construction details to a readable title, then blur the title into the background while showing the date and website in the foreground.
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.
Text animation
Extruded manifesto loop
Turn a sentence into connected, thick word blocks. Use their fronts for reading and sides for iridescent material, looping back to the same front-facing pose.
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
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.
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.
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.
Text animation
A world connected by computational fragments
Connect multiple themes through code strips and offset slices, expressing the relationship between the physical world and computation.
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.
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
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.
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.
Text animation
Figma — CONFIG
Letter fragments begin scattered, then assemble into a title as the progress line grows independently; on exit, the letters dissolve before progress completes.
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.
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 — 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
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.
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.
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.
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
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.
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.
Text animation
An engineered racing identity
Assemble scattered black stroke segments into AI–GP, with orange-red control frames, cross-lines and alignment points appearing alongside them. Align the subtitle and organizer vertically.
Video reference only; no editable project supplied.
Text animation
Security data from scale to result
Left-align the heading and color Cybersecurity Data orange; illuminate part of the dot matrix below. Then turn the full screen orange, rapidly increase a large white number and reveal vulnerabilities.
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.
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 quiet website with playful cursor trails
Keep the crest, short phrase and link centered, with sparse navigation in the page corners. Arc the blue cursor through negative space and return it to the central text as the sole moving focus.
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.
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
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.
Text animation
Red wordmark reveal
Rapidly pull an extreme logo and red-text close-up back into a small composition, leaving extensive black negative space for a brief brand reveal.
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.
Text animation
Typography reflow
Build the whole motion through text scale and alignment: reveal letterform details first, pull back to a complete phrase, then split it into a movable column of action words.
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.
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.
Text animation
The web as living memory
Use a short phrase about the web's memory as the central axis, layering knowledge illustrations before early webpages so accumulated content naturally leads into the browser era.
Video reference only; no editable project supplied.
Text animation
Parallel Web Systems — Agents and context
Use minimal text and thin rings to shift attention from the agent to the context it depends on.
Video reference only; no editable project supplied.
Text animation
Slack — slack
Break the old graphic into its smallest units, then reassemble the mark and name using the same colors.
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.
Text animation
Goodnotes — Goodnotes
Fix the brand name's position while icons, version numbers and product suffixes change in sequence, finally returning to the main brand alone.
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.
Text animation
Living waveform poster
Keep background waves breathing continuously while the central heading stays clearly fixed in one position.
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.
Text animation
Particle phrase
Assemble scattered particles into a readable sentence, then disassemble it using the same particles.
Video reference only; no editable project supplied.
Text animation
Typeface to currency
Explain the typeface's origins, show glyph details, then apply the same typography to different currencies and palettes.
Video reference only; no editable project supplied.