Watch: press Play all 9 below, or Play on any one step, and see it zoom in, click, then pull back to the next step.
Skip: the small form text in the wide shots (the caption band carries those) and the notes under this box.
Say yes or no: is this the look and the zoom, click, zoom out pattern we reuse for every other feature?
Notes: how it is built, what was checked, what is flagged
One engine, data per feature.feature-anim-engine.js is the only animation code. This page holds the Sign up data only: 3 screens and 9 steps of beats. Upload a list, Add users and the rest become new data with the same engine.
Pieces reused from the shot list (feature-shots.html): the sign-in frame, the camera, the caption band, the look-here ring, the cursor and click, the field that types itself, the button press, the tick box and the big status icon. Camera zoom in log space, as in ASSET-040 M-45.
Square 1080 x 1080 frame, the LinkedIn feed shape. The camera zooms until the text you read is 47px or more in the frame, about 16px on a 360px phone (the size rule in the craft playbook). The meter under each stage measures it live after every beat. Wide shots show the whole page on purpose and are marked as context.
Motion only where it explains. The password rules tick at the exact letter that meets them. The confirm field ticks when both match. The step dots in the band are the count: step 4 of 9 is four dots filled.
Screens are drawn, never screenshots. Drawn in our brand from the reskin screens register and confirm-email. Demo names only: Delphi, delphi@inkwell-tide.example. The password is shown as dots.
Titles: one teal italic emphasis each, told not asked.
No MP4, GIF, voice or render. HTML first.
Sign up with Google is on the page but greyed, with no step: what happens after it is on no screen (part 1 flag).
The verify email in the inbox is not drawn. Step 8 shows the Verify your email screen, because the email itself is not in the reskin screens.
All 9 steps in a row
The whole feature on one stage, the way a video would run it. Every step below is the same stage started at its own step.
Stages fill their column. Phone size shows them 328px wide, as a phone feed would.
The 9 steps
One animation per step
Each step starts where the last one ended. Play runs its beats in order. Next beat shows one reveal at a time. The chips jump to the pose after that beat.