wagdrop

A motion piece of a courier app's tracking screen. A phone drawn in HTML and CSS floats on a warm, dark stage and turns in 3D through a 14-second story: the cream screen says "Good things come to those who wait", a white card counts down from 12 minutes while a bike rides along the route bar from "Bakery on Rua Nova" to "Home", and a soft glare slides across the glass as the phone turns. In the middle is Rex, the courier dog in a cap, collar and courier badge. He looks like a flat black-and-cream line illustration, but he is a real 3D model in three.js: flat fills with no lighting and ink outlines drawn as inverted hulls, so the line is his true silhouette and is recomputed every frame. As the phone turns he turns his head the other way to keep facing you, a little late; his floppy ears swing with inertia and settle, and he breathes and blinks. At 12 seconds the card turns to "Rex is at your door" / "Now", Rex squints happily with his tongue out, and the headline crossfades to "Knock knock. It's here". Then the phone settles front on with a slow sway and Rex stays alive. The phone's moves are keyframes (time, yaw, pitch) eased with smootherstep; window.__SP sets the speed (the concept video ran at 1.75). The 1080 × 1080 stage scales to fit any window, the backdrop runs on to the edges, portrait screens keep the phone large, and reduced motion shows the arrival still.