Stylized Icons

Animal Crossing: New Horizons, a social-simulation game for the Nintendo Switch, has its own in-game phone with app icons, each illustrated in the game's own pastel, hand-drawn style and hover animations. Rebuilding the system for real-world apps sounded like a fun challenge, so I carried it through concept to code, starting with an audit of the existing icons and ending with a shipped, working build.

Visual Process

First, I broke the game's icon illustration style down into a set of guidelines.

• Palette: Pastel colors

• Stroke width: Uniform across every glyph, with rounded caps

• Detail level: Mostly flat shapes, with a few small illustrative details

• Object treatment: A mix of modern UI shorthand and illustrative real-world objects

From there I redesigned 35 apps with vectors in Figma, deciding what to keep and what to change. While some app icons kept their brand identity through the style change, a few I'd originally planned to redesign lost too much of it under the new palette, so I cut them. I focused on style adaptation rather than just redrawing every app, so I also excluded any designs that felt too similar to the originals.

A few icons worked in a direct reference from the game as part of the redesign. Telegram, for example, became the paper airplane from the game's Mario Kart collaboration, an easter egg for anyone who'd recognize it.

Motion Process

Next, I took the same approach to analyzing the game's hover animations that I used for the visual style. Based on my observations, I identified three main principles.

• Glyph: A simple bounce, with exceptions for unique icons

• Background: An ambient textured pattern related to the app's purpose

• Depth: The glyph breaks the icon's border

Timing for Messages

Sketches for Music

Sketches for Telegram

I explored some early motion ideas in Figma, working with the vectors I'd already built, but Figma's Smart Animate was better suited to micro interactions than full animation (Figma Motion wasn't out yet). So I switched gears into Adobe Animate, then worked out timing in After Effects, shown above.

The freedom of sketching in Adobe Animate let me experiment more, but resulted in movement that no longer matched the animation style or use case as a hover state. I brought the animation back in line with the three principles above, finishing five icons fully animated in After Effects for Messages, Music, Teams, Telegram, and Magnifier.

Interactive Process

Next, I took the icons into the browser, rebuilding all five as live interactions with Claude Code, wired to hover and keyboard focus. Claude Code's first suggestion mixed CSS for the simpler comps with Lottie for the more complex ones. I wanted to keep all five as the real animation I'd already built in After Effects, but since testing it cost nothing I built the CSS version anyway. When comparing, it wasn't close to how I'd animated it, so all five went with Lottie instead.

The game shows each hover as a self-contained loop, cutting in a single frame with no transition in or out. That works in the game, but I wanted the interaction to translate into standard web animation, so I kept the entry eased in CSS instead of matching the game. All five icons share one set of motion tokens, timing, easing, and corner radius, so one change updates all five. For reduced motion, each icon jumps straight to a distinct "pose" frame on hover or focus instead of animating in.

Implementing with Claude Code was not only directing it, but also catching and verifying real issues along the way. A dropped export mask left a visibly jagged wing on the Telegram icon until it was traced back to the source file. Another issue was a focus/hover handling bug, where hovering off an icon could cancel its animation while it was still keyboard-focused, fixed by tracking both inputs together.

View the live demo →

Reflections

• Design statics with motion in mind. How something animates informs the finished static design, and how it should be built structurally to animate.

• Test drafts against principles early. Checking an early animation draft against my three motion principles caught its drift before I built further.

• Provide Claude Code more context for efficiency. Providing more context upfront would have caught bugs like the clipped canvas space I'd deliberately oversized, since nothing told Claude Code that was intentional.

Thanks for reading!

This is personal project, not affiliated with Nintendo.