Menu Animation

The brief was self-imposed: take an illustrator's aesthetic — handcrafted, expressive, texture-rich — and build a functional game menu around it without softening the illustration into something generic and safe.

Most UI systems that incorporate illustration do it by containing the illustration: a header image here, a background texture there. This project asked what it would look like if the illustration was structural — if the menu's behavior came from the same logic as the visual style.

The morphing main navigation bar is the core idea. Instead of navigating to a new screen, the bar transforms — its shape and content change as you move through sections. Visual continuity replaces the standard page metaphor.

Animated at 12 fps — a deliberate constraint. The lower frame rate reinforces the handcrafted quality, aligns with the retro reference, and forces cleaner motion design: fewer frames means each one has to carry more weight.

• Motion hierarchy — primary transitions (section changes) are clearly differentiated from secondary micro-interactions
• Rhythm — the 12 fps timing creates a consistent visual pulse that ties the motion system together
• Legibility as a check — every stylistic decision was validated against whether the interface remained readable mid-animation
• No smoothing — jagged, intentional transitions that honor the aesthetic instead of fighting it

The 12 fps constraint turned out to be generative rather than limiting. It forced a level of precision in keyframe placement that smoother animation often lets you skip — each frame matters when there are fewer of them.

Illustration and usability kept pulling in different directions throughout the process. That friction was productive — it forced every decision to justify itself on both fronts.