lopewell

A phone mockup over a runner photo plays one design review on a 15.6-second loop. It starts as a generic running app (purple gradients, Arial Bold, emoji) and is reworked in four labelled passes: 01 Spacing draws red guides, brackets and px badges while every block snaps to an 8 pt grid; 02 Color wipes each gradient card into a plum, cobalt or ember inner glow or glass, with notes naming each swap; 03 Icons mask-wipes the emoji into 1.6 px line icons; 04 Type wipes Arial Bold into Geist and the distance into a dot-matrix display. Then the widgets come alive: a route draws itself with a dot riding its tip, pace bars rise, a heart-rate ring fills and beats, the goal knob slides from 32 to 33 km and a sheen crosses the start button. Everything is one pure function of time, so any moment can be drawn on its own. The stage scales to any window, with the backdrop and guides running on to its edges.