UI Morph Animation Design

How One Shape Carries the Whole Film

The film runs 14 seconds at 120 BPM, which the source notes divide into 7 bars. A single shape starts as a Generate button, then becomes a loader, check, dynamic island, music player, volume slider, toggle, tab indicator, chart, command palette and toast before returning to the button.

The tradeoff is that every state must be reachable from the previous one by resizing and re-rounding the same body. Content that does not fit that shape change has to be dropped or redesigned.

Reading the Player, Tabs and Palette Frames

Three captured frames show how different the same shape can look. In the player, a black rounded card carries a gradient tile, “motion study 02”, a scrub bar at 0:49 with −2:09 remaining, and previous, play and next icons. In the tab frame, a white pill holds Day, Week and Month, with a black indicator behind Day.

In the palette, the typed word “frame” leads to two results, “Frame rate · 60fps” and “Every frame is code”, with the first highlighted.

01

Readable Playback States

Elapsed and remaining labels sit beneath the progress bar. They are illustrative interface content inside a 14-second film, not the runtime of the showcase video. Keep both labels clear when adapting the player to a smaller canvas.

02

The Tab Indicator Is a Moving Object

The black Day pill sits inside a white track while the cursor hovers Month. Because the indicator is a separate shape, it can slide and stretch between labels instead of swapping highlights.

03

Palette Text Matches the Film

The results “Frame rate · 60fps” and “Every frame is code” talk about the piece itself. Reuse that idea, but replace the strings with your own product vocabulary.

Time-Driven Construction and Its Tradeoffs

The source notes describe a single render(t) function that draws the whole frame from master timeline time. Each visible value is a pure function of t, using eases, springs or keyframes, and no state carries between frames. Backward seeks therefore reproduce identical frames.

This makes export predictable, but it asks more of the author. Interactions that would be trivial with event handlers, such as hover or typing, must be written as timed keyframes.

1. Keep One Clock

   The GSAP master timeline is the only clock. Layers read its current time rather than running their own timers.

2. Sum Springs Per Change

   The adaptation notes call for springs summed per change, so overlapping moves blend rather than restart.

3. Let the Cursor Cause Everything

   Each state change needs a pointer action before it. Without that rule the morphs read as decoration rather than interaction.

Source and Scope

This is an official OpenDesign code remake and adaptation of a motion piece originally posted by @twoclipping on X. It is rebuilt in code from the published piece, and the 14-second soundtrack is an original score rather than audio from the source. Credit is a factual reference and implies no endorsement by the original author.

This is a rendered motion study, not a usable interface product. The player, chart and palette inside the film do not respond to input. The template comes from a proposed OpenDesign video workflow; availability depends on the installed version.

Adapting the Morph to Your Own Product

The notes suggest replacing the states in the SHAPE definition and their contents while keeping the three rules: one shape that never cuts, springs summed per change, and a cursor behind every change. Start by listing the five product states you most need to show, then order them from smallest to largest container.

Keep the first and last states identical if you want a loop. If your states differ greatly in size, expect the in-between frames to look stretched and slow the tempo accordingly.