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
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
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
An information field focuses into research
Build a large oval from gray-purple and gray-green planes, with a task card near the central black dot. Gradually shrink the whole composition, revealing white circular openings outside while the black dot stays at frame center.
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
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.
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
Connected customer worlds
Bring brand dots into human and everyday scenes, connecting customer stories through shared lines, red objects and positional handoffs.
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.
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.
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
Cashback offer mechanics
Coins emphasize the benefit, then a decreasing and replenished balance explains the cashback mechanism
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
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.
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.
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
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.
3D animation
Focusable planet carousel
Slide spheres along one horizontal axis, clipping both ends at the viewport; slightly enlarge the active sphere and reveal its text
Video reference only; no editable project supplied.
Graphic animation
Sound-wave heart
Animate individual soundwaves independently before combining them into a stable heart mark.
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.
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.
Graphic animation
Cloudera — Your journey to enterprise AI
Place enterprise-data questions within a journey with a starting point, obstacles and converging paths, ending with the same group of characters heading toward a shared destination.
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.
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.
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.
Live-action editing
Many possible futures
An individual's writing first triggers changes in the world, then the story moves from a single ideal to many people's different futures.
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
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.
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 — 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.
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.
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.
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
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 — Design to implementation
Select annotated design frames first, then pass that selection context to the implementation agent; implementation results must correspond to the selected screens.
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
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
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.
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.
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
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
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.
Graphic animation
Mathematics as evolving geometry
Establish each research topic with a geometric diagram, then reduce it to a few points that connect to the next diagram.
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.
Interface animation
Conversational Design Workflow
Let the user enter their intent first, show the result next, then demonstrate local edits and export; the result must appear after the submit action.
Video reference only; no editable project supplied.
Interface animation
Making-of Window Collage
Layer windows in sequence, with the central heading covering the top layer last; retain recognizable edges of surrounding content.
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.
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
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
Search across people, places and things
Use dots, capsules and lines as shared primitives, moving from abstract categories to search results.
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.
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.
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
Salsa through instruments and dance
Connect musical performance and dance steps through circular records, horn bells and petals.
Video reference only; no editable project supplied.
Graphic animation
A growing stack of characters
Characters land on the previous character one by one, with the entire stack swaying slightly after contact.
Video reference only; no editable project supplied.
Live-action editing
A prize motivates participation
Use the reward to attract attention, immediately explain it with on-site footage, then present participation steps and examples.
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.
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
A character presents a payment card
The character looks toward the card as it rotates continuously around its vertical axis.
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.
Graphic animation
A financial partnership identity
Keep both brands stationary, with fluid and lighting changes providing the only main movement.
Video reference only; no editable project supplied.
Graphic animation
A partnership in deep blue
Keep the marks fixed without jumping while bright background areas pass slowly behind them, emphasizing the partnership identity.
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
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
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
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.
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
Regional odds exploration
Scatter separate state shapes before assembling them into a map, expressing a shift from noise to structured information
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
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
Design-system component creation
Inspect the existing design system and variables before creating artboards, rather than freely drawing a similar-looking image
Video reference only; no editable project supplied.
Interface animation
Perplexity — Your data has answers
Introduce a question from existing data cards, then show query and report evidence after connecting the data source.
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.
Interface animation
From prompt to bulk CMS updates
Move from a keyboard close-up to a dark input field, then cut to the CMS table after typing finishes. Reveal blue outlines along table rows to show one request affecting multiple records.
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.
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.
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.
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
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.
Interface animation
From a brand URL to an ad family
After link input, gather surrounding posters into logos, colors, fonts and product assets. Products enter a combination ring, and the ad matrix unfolds only after the count rises.
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.
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.
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.
Graphic animation
A wireframe tunnel introduces a partnership
Expand perspective lines from a small central opening into a four-sided grid; after moving forward, narrow it toward both sides to leave symmetrical positions for the two logos.
Video reference only; no editable project supplied.
Interface animation
A computing scene dissolves into an emblem
Place the cloud above and devices below, connecting the layers with a glowing vertical line. Dim surrounding terminal information and retain a central vertical composition.
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.
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.
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
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
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
One conversation produces several formats
After requesting a coffee website, ask for a presentation and launch graphics. All three outputs share photography, a brown palette and serif headings, demonstrating context reuse through content consistency.
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.
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.
Graphic animation
A cube opens to reveal a letter
Rotate the cube and pull back first; after thin white seams appear along the edges, spread the faces outward. Keep H at the original center and increase separation until the panels leave the frame.
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.
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.
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.
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.
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
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
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.
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
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.
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.
Graphic animation
Continuous symbol morphing
Continuously reshape symbols around one center, changing meaning through notches, holes and subdivisions rather than fading separate icons in one by one.
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
Organic Cloud
Use material cuts at the same position in under two seconds to connect green organic forms, landscapes and iridescent pipes into one logo family.
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.
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.
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.
Graphic animation
Three-form orbital loop
A sphere, circular disc and square plate form a compact rotating composition. The square moves around the center, with occlusion giving the planes spatial depth.
Video reference only; no editable project supplied.
Graphic animation
Full-frame pattern cycles
Transform four full-frame geometric patterns in sequence, shifting from the hard rhythm of folded corners to soft waves, then dots of varying sizes.
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.
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
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
From individuals to interactions
Use one fruit poster to represent an individual, then pull back into many differentiated samples; let particles cross poster boundaries to tell a story from individuality to interaction.
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.
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
Airtable — Create an app
Show app generation through side-by-side requests and results, then bring attachment updates and other business examples into the same structure.
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.
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.
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.
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.
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.
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
Descript — Create social clips
Frame one video-editing request as an explicit asset handoff: select a preset, supply video, confirm layout, supply brand guidelines, then show results in two ratios.
Video reference only; no editable project supplied.
Interface animation
QuiverAI — Arrow 2.0
Demonstrate vector generation's value at three scales: editable paths, work categories and real applications, then return to generating stylistically consistent variants.
Video reference only; no editable project supplied.
Interface animation
Rive — Interactive motion
Demonstrate interaction through works that genuinely change state, with games, controls, design systems and a sequencer each showing one clear action.
Video reference only; no editable project supplied.
Graphic animation
Suki — Presence is powerful
Represent collaboration between clinicians and tools with two sets of fine lines, merging them into a visual thread through real care scenes.
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.
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.
Graphic animation
One grid, changing worlds
Connect geometric patterns, real-world scenes and branding through the same dot-matrix medium.
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.