Rotate to LockupEnding
Converge to Mark
At the end, multiple elements gather and compress into a single icon or logo, always centered in the frame.
Seen in
Full recipe
Why it works
A slow drift followed by a fast gather contrasts speeds and gives a clear end point. The shape loses detail step by step, from a concrete product to geometry to a brand mark, while its position stays at the center of the frame without jumping. When the ending uses the same technique as the opening, the film closes on itself.
Spec
- Timing
- Film 10.6s. Workspace demo 0–6.2s; the pieces drift down from 5.0s (1.2–1.5s, about 4–5% of frame height); converge from 6.2s: each piece starts 0–0.55s after 6.2s and takes 0.65–0.95s (20–29 frames); chrome leaves 6.2–6.7s, wallpaper washes to white 6.4–7.4s; mark lands 7.32s and settles over 0.65s (20 frames); wordmark pulls out 8.05–9.3s, tagline 8.9–9.7s, held to 10.6s
- Easing
- Drift
linear; converge position oncubic-bezier(0.32,0,0.67,0)(power3.in, faster as they get closer) for one axis and power2.in for the other, so paths curve; scale power2.in, rotation power1.in, opacity fade power1.in over the last 35%; mark landing back.out(2.1); wordmark and taglinecubic-bezier(0.16,1,0.3,1)(expo.out) - Camera
- Fixed frame, target icon at the center (960, 540). Slow push 1.00→1.035 linear over 0–6.2s (x −14px, y −6px), back to 1.0 over 6.2–7.1s with power2.inOut; after landing the lockup pushes 1.00→1.04 linear over 3.0s from 7.6s
- Subject
- 17 pieces drift down, then gather on the center: 4 windows, a timer, a notification, a picture-in-picture, a command palette, 2 collaborator cursors, and 7 dock icons; they scale to 0.07–0.4, rotate 6–30° and fade out in their last 35%; the dock's own Tessel icon travels at full scale and the 200px mark takes over from it at the same size, leaving only the mark
- Style
- Light base
#f5f5f7under a pastel wallpaper (peach, pink, blue, lilac) that washes to white; white windows with 12px radius and soft violet shadows; indigo accent#5b5bf0(icon gradient#8a8cff→#3d31d6) with four white tiles and one amber tile; faint violet vignette
Prompt
Build an ending called Converge to Mark as a 10.6-second film. Build a product workspace on a light #f5f5f7 base with a pastel wallpaper: four white windows, a timer, a notification, a picture-in-picture, a command palette, two collaborator cursors, and a dock of 7 app icons with your icon in the middle; run a short demo for 6.2 seconds with a slow linear push (scale 1.00→1.035). From 5.0s drift every piece down at constant speed (34px per second). At 6.2s the menu bar and dock background leave over 0.5s, the wallpaper washes to white over 1.0s, and every piece travels to the center of the frame (960, 540): each starts 0–0.55 seconds after 6.2s and takes 0.65–0.95 seconds, with power3.in on one axis and power2.in on the other, scaling to 0.07–0.4 (windows 0.07–0.09), rotating 6–30° and fading out over the last 35%. The dock icon of your product travels at full scale and a 200px version takes over at the same size at 7.32s, landing with back.out(2.1) over 0.65 seconds with a glow ring behind it. At 8.05s the mark slides left while the wordmark is pulled out from behind it over 1.25 seconds with expo.out (cubic-bezier(0.16,1,0.3,1)), blur 10px→0, then the tagline fades in at 8.9s; push the lockup 4% and hold to 10.6s. Build it with HTML/SVG + GSAP.
People describe it as
- Everything shrinks into one icon at the end
- The scattered icons fly to the middle and become the logo
- The text shrinks to a dot of light, then becomes the mark
Often confused with
- Rotate to LockupConverge to Mark gathers many elements to a point; Rotate to Lockup turns one object to a target angle.
- Dispense Line-upThe retract in Dispense Line-up only returns to the original subject; Converge to Mark ends on a new icon or logo.
More Ending
