Morphing Icons

Overview

I experiment with Claude Code more every day. As the person I am, I'm fascinated by the subtle animations that make something feel premium, without the user really noticing. This is one thing I love with my Android phone. The small moments where icons transform rather than swap. The hamburger menu that rotates into an X. The play button that becomes pause. These transitions feel considered in a way that static changes don't.

I wanted to see if Claude could help me build something like this, but with a twist: every icon should be able to become any other icon. Not through any animation tricks, but through actual transformation of the underlying shapes.

The result was 20 icons, any of which can morph into another. This took roughly 30 minutes to complete with Claude's assistance.

The Boundaries

The first attempt was as predicted -- an icon component set with smooth transitions that fade in and out. This is technically correct, but not what I had in mind. There's no sense of transformation.

I wanted the lines to move, not fade.

I gave Claude this new blueprint. Every icon, regardless of complexity, would be represented by exactly three lines, with unused lines collapsing and becoming invisible.

Some icons mapped naturally. For example a Cross is just plus rotated 45°. Others required more creativity, such as the checkmark that uses two lines and collapses the third.

Rotation groups

I started clicking through transitions. Most looked good. However there were several where something looked wrong. For example, arrow-right to arrow-down, which should just require a rotation of 90°, was still transforming, given the boundaries provided to Claude.

I described this to Claude as well as the idea of rotation groups. Icons in the same group that share coordinates and differ only by rotation, do not transform but instead rotate.

Cross-group morphs

When transitioning between different groups, the lines interpolate through coordinate space. This gives certain transitions a magical feeling. You're watching shapes genuinely transform into other shapes. The below are my favourite:

Testing tool

I asked Claude to build this tool so that transitions could be tested effectively. It proved to be an incredibly helpful tool for feedback. I could simply point to specific sequences that felt off and explain why.

Reflections

I'm genuinely impressed with what Claude was able to build here. The core architecture is elegant: three lines per icon, rotation groups for same-shape icons, coordinate morphing for everything else.

With that said, there were limitations. Claude couldn't tell when something looked wrong. The insight that arrows should rotate rather than morph coordinates, for example, had to come from me, even though rotating would have meant smoother, more natural animations. It optimised for working rather than feeling right, which meant I had to watch the transitions and describe what felt off. Once I did, it started to understand the why.

The underlying approach is sound though. From there, it's iteration. Play with the result, notice what's wrong, describe it, repeat.