Memorables

Morphing Animation

Morphing animation where shapes turn into one another: icons, buttons, logos, letters and numerals.

Morphing is animation in which one shape turns smoothly into another: a button becoming a menu, one icon becoming the next, a letter becoming a number. In an interface it keeps people oriented, because nothing simply disappears; in a brand it reveals the logic behind a logo. This page gathers morphing buttons, menus and icons, logos and numerals in transformation, by interface designers, motion designers and studios such as Kopp, Kevin Dukkon and Studio Dumbar.

46 works by 41 creators, newest added 10 November 2026. Each is credited to the people who made it and links to the original.

All 46 Morphing Animation

  1. Yazio Letterforms by Koto — Letterforms from the rebrand of Yazio, Europe's leading nutrition app, where the outline of Yettie, its horned but lovable beast, folds into a g, so the bold type borrows its horns.
  2. Base Symbol by Mouthwash Studio — A logo animation from the Base rebrand, where the circle Base launched with squares off into its new symbol, a plain blue square derived from Coinbase, taken from the launch film.
  3. Base Sans by Mouthwash Studio — Base Sans, the custom typeface of the new Base brand, shown through its @ sign squaring off and rounding again in a wave, from a launch film inspired by Powers of Ten.
  4. Ketone-IQ Benefits System by Mouthwash Studio — A product benefits system for Ketone-IQ, the energy science company, where one line shape gains a side and an inner lobe for each benefit, so the brand can grow into a family.
  5. Liquid Arrow Button by Kopp — A gooey hover effect for a button, where metaballs let the arrow end pinch off into its own circle and melt back in, one of the copy-paste components of an interaction code library.
  6. IBM Financial Intelligence Garden by FIELD.IO — An interactive experience for IBM's Financial Intelligence, where the circle of a coin grows into flowers and foliage in a garden that responds, so people learn about finance through play.
  7. Genie Minimise by Raphael Salaja — The macOS Genie minimise effect rebuilt for the web with Base UI components, where a window bends into a funnel and pours into the dock, and a debug view slices it into strips.
  8. Nav Experiment 2.0 by Abhishek Bariya — A mobile navigation experiment where a round corner button fans out its menu along the curve of the phone screen, then folds back into the chosen icon and retints the screen.
  9. Blob Clock by David Szakaly — A looping motion study of a clock without a face, where thin numerals slide one by one through a black blob with glowing edges as a hairline hand reaches toward each hour.
  10. Opt Out by Mat Voyce — A kinetic typography loop urging artists to object to Meta training generative AI on their public posts, OPT and OUT swelling by turns into spiky letters like a shout of protest.
  11. Hey by Mihai Dolganiuc — A logo animation for the Hey wordmark, where a winking purple smiley unrolls into handwritten lettering, its smile and eyes becoming the letters in one continuous monoline stroke.
  12. Connected Arrows by Vadim Carazan — A logo animation for a mark of connected arrows, where one dot splits in two and a single cut line turns the circles into an arrow heading right, then up, a compact image of growth.
  13. Dot Morphs by Emanuel Costa — A 2D motion study in morphing, where four plain black dots each unfold into discs, ellipses or rings and fold back, proof of how much movement a single circle can hold.
  14. Generative UI by Dmytro Kondakov — A generative UI concept for an AI assistant that builds every answer out of its own particles, so the orb scatters into a flight board, a football scoreline or stock cards.
  15. Taste Directors by Jack Hillery — A logo animation for Taste Directors, the invite-only network of AI-powered creative directors, whose mark of two head profiles is rebuilt in ASCII characters and sent through 3D forms.
  16. Fold Toolbar by Malay Patel — A toolbar micro-interaction for a drawing tool where tool groups unfold in place instead of opening a menu, then fold back with the chosen shape or pen as the new icon.
  17. macOS Folder Icon Timeline by Raul Dronca — An interactive timeline of the macOS folder icon from 1984 to 2026, where dragging one scrubber morphs a single folder through every era, from 1-bit pixels to Aqua and today’s flat blue.
  18. laurent.fyi by Laurent Del Rey — A portfolio website that gathers 307 apps and images into one interactive image cloud, a sphere that morphs into a heart, a smiley and a star, then spreads into a browsable grid.
  19. Brain Fog Ring by Yonsan Kim — An abstract motion study in Cavalry, a glowing ring that morphs between a D, a triangle and an O as a new blur filter sweeps one side, from a series named I have brain fog.
  20. Shape-Shifting Controls by Kevin Dukkon — A design system of UI controls that share one DNA, so a checkbox, toggle, stepper, segmented control, slider and chips feel like a single shape changing on the same tokens.
  21. Status Bar States by Mobin Amiri — An iOS concept imagining new states for the iPhone status bar and Dynamic Island, where battery, Wi-Fi and signal fold into a single ring gauge while a timer splits off.
  22. Status Icons by Kevin Dukkon — Animated task status icons in which every geometric mark builds into place with a motion of its own, a crescent filling a circle halfway, a hand sweeping round a ring into a check.
  23. WebGPU Morphing Engine by Aristide Benoist — A WebGPU morphing engine for page transitions, written into a custom Rust framework, where glyphs, numbers and outlines melt into one another through chromatic post-processing.
  24. Animated Interface Icons by James McDonald — Animated interface icons drawn for a new product UI, 28 rounded line icons that each get a small motion of their own, from the designer who drew Raycast’s icon set.
  25. Conservation of Intelligence by Alex Abraham — A 2D character animation that puns on the conservation of momentum, as the Grok Bot mascots hang like a Newton’s cradle and each one changes shape mid-swing.
  26. CASI by Templo — Brand motion for CASI, a climate non-profit for the art world, whose pictograms drawn from hobo hieroglyphics are hand-animated frame by frame, each sign morphing into the next.
  27. Panorama Globe Poster by Panorama Branding — A poster from the new visual identity of Panorama, a Bogotá branding consultancy, where a globe keeps morphing into new continents, the picture of a firm that adapts as brands change.
  28. LookAway Orb by Kushagra Agarwal — A liquid glass UI animation for LookAway, a Mac app for screen breaks and posture, borrowing from the Siri orb and Apple Music’s ripples to rise from the dock as a soft bubble.
  29. Buttons with Feelings by Sasha Balandina — A button micro-interaction that gives every change of state a mood, from Copy to Published, each with its own colour and a tiny kaomoji face, so Like ends in a blushing Liked.
  30. Splitting Actions by Nitish Khagwal — A button micro-interaction for a payments screen where Pay and Request split into the next choices instead of opening a menu, keeping the decision right under your finger.
  31. Grok Bot on ESP32 by Attiq R. — A hardware prototype running the Grok Bot animation state machine on an ESP32 board, its faces blinking and morphing on a small round screen, surprisingly smooth for so small a chip.
  32. Soft Logic by Andreas Wannerstedt — A surreal 3D animation from Soft Logic, a personal study of form and intuitive transformation, where a glossy lamp swells and softens as it lights up among floating glasses.
  33. Comedy Central Idents by Studio Dumbar — A TV ident for Comedy Central built on its mission to make life funnier, where the logo gets soft-body physics and comic timing, stretching like a tongue and swelling into a bubble.
  34. Aithyra Elementaries by Studio Dumbar — The elementaries of Aithyra’s identity, modular dots and pills whose motion borrows from laboratory research as they transform, carry words and generate type for the AI institute.
  35. Glassware Morph by Fafa Zhu — A flat shape morphing loop made in After Effects, where a wine glass becomes a goblet, a decanter and a carafe, a return to the simple stuff with nothing but a silhouette.
  36. Split by Vincenzo Lodigiani — An animated short about the dualistic mind that sees the world in black and white, told through a single profile whose silhouette and negative space keep trading places.
  37. Artifact Logo by Yaël Bienenstock — A wordmark animation for Artifact, a home for the internal work of a product design studio, whose letters fill with the posters and screens it keeps before folding into its a.
  38. Luminance Blur by Antonin Waterkeyn — Kinetic typography made in the Cavalry beta to test its new Luminance Blur effect, a rounded number 2 in GT Maru Mono melting into light and redrawing itself in other weights.
  39. Dynamic Island Moments by Chan Karunamuni — Dynamic Island animations added to iOS over the year, where Apple’s black pill stretches into a live translation, Shazam, a song and an alarm, each moment growing from one shape.
  40. on.design Icons by Andreas Storm — An animated icon set drawn for the on.design website, rounded line icons that morph into one another, a magnifying glass melting into a picture frame, so the grid feels alive.
  41. Age Slider by Aditya Sur — A slider micro-interaction that measures age on a portrait instead of a number, the face growing from a boy of five to a man in his nineties as the ruler moves, in mono or colour.
  42. Sliced Numeral Clock by Daniel Maarleveld — A kinetic typography clock concept made with a custom p5.js tool that cuts letters into isometric blocks and morphs one into another, so each digit rebuilds itself as the next.
  43. Path Finder by Daan Vissers — Kinetic typography in Cavalry for a daily motion practice, where a path finder and a value array send the date along the edges of a black shape that keeps morphing between polygons.
  44. Liquid Popover by Kopp — A liquid popover menu UI component in plain HTML, CSS and JavaScript with no dependencies, where menus pour out of their buttons like liquid and draw back in as they close.
  45. Resend Running Club by Manoel do Amaral — A visual identity and brand motion for the Resend Running Club, a morning run near the Golden Gate Bridge, where horizontal stripes draw an R that becomes a runner, then the bridge.
  46. The Life of a Button by Cole Derochie — A UI concept that tells the history of interface design through a single component: dragging a timeline from 2026 to 1986 morphs one button from flat blue to glossy Aqua to pixel Mac.

Featuring work by

Mouthwash Studio, Kopp, Kevin Dukkon, Studio Dumbar, Koto, FIELD.IO, Raphael Salaja, Abhishek Bariya, David Szakaly, Mat Voyce, Mihai Dolganiuc, Vadim Carazan, Emanuel Costa, Dmytro Kondakov, Jack Hillery, Malay Patel, Raul Dronca, Laurent Del Rey, Yonsan Kim, Mobin Amiri, Aristide Benoist, James McDonald, Alex Abraham, Templo, Panorama Branding, Kushagra Agarwal, Sasha Balandina, Nitish Khagwal, Attiq R., Andreas Wannerstedt, Fafa Zhu, Vincenzo Lodigiani, Yaël Bienenstock, Antonin Waterkeyn, Chan Karunamuni, Andreas Storm, Aditya Sur, Daniel Maarleveld, Daan Vissers, Manoel do Amaral, Cole Derochie.

Related topics

Browse by category

Topics