Rotate to LockupEnding
Mark-to-Wordmark Unfold
A logo mark sits centered, then the wordmark unfolds from behind it or outward from its center, optionally with a scramble-then-lock effect.
Seen in
Full recipe
Why it works
The mark and the name are bound into one action: the wordmark is pulled out from behind the mark, or the mark stays put while the other letters grow around it. Scrambled characters appear only on the newly added position, and the other letters stay stable. The opening and the ending can use the same move, one in black and one in white.
Spec
- Timing
- Film 9.4s: product window shot 0–3.6s (drift 0–2.6s, push 2.6–3.6s); mark hand-off 3.6s; accent half leans back 3.75–4.05s and returns 4.15–5.05s; mark moves left and the wordmark unfolds 4.15–5.45s (1.3s), letters from 4.2s at 0.08s stagger (1.25s each); tagline 6.3s (0.8s); slow push 3.6–9.4s
- Easing
- Unfold and push
cubic-bezier(0.16,1,0.3,1)(expo.out); the mark movesx 322→0while aclip-pathleft edge slides 250px→−72px; letters go from blur 12px→0 and opacity 0→1 (0.4spower1.out); the accent halfrotation 0→−20°withpower2.out0.3s, then back withback.out(2.2)0.9s - Camera
- Product window at an angle (perspective 1600px):
rotationY9°→5.5°,rotationX−5°→−3°,rotation−1.4°→−0.7°,scale1.06→1.16 over 2.6slinear; then a 1.0sexpo.outpush to about 12.6x (328/26) with the tilt flattened to 0, centering the sidebar mark; the lockup then driftsscale1→1.05 over 5.8s - Subject
- Shot 1: an issue-tracker window (3 groups, 17 rows fading in with 0.022s stagger, headers 0.12s) with a selection highlight stepping at 1.15s and 1.95s and a 'link copied' toast 1.4–2.3s, whose workspace logo is a 26×16.5px mark. Shot 2: that mark at 328×208px (two quarter discs, ink and accent) slides left by 322px while the 4-letter wordmark (286px, weight 600) is revealed from behind it letter by letter
- Sync
- The window mark and the vector mark swap on the same frame (3.6s) at the same size and position; the clip edge follows the mark's right edge; letters start 0.05s after the mark begins moving; the UI fades over the first 0.4s of the push
- Style
- Warm light
#efece4background, ink#14130fwordmark, accent#ff4a1fon one half of the mark; tagline in 22px monospace with 0.26em tracking; soft vignette
Prompt
Build a brand ending called Mark-to-Wordmark Unfold. Start on a product window (an issue list) tilted in 1600px perspective (rotationY 9 to 5.5 degrees, rotationX -5 to -3, scale 1.06 to 1.16 over 2.6s with linear ease), then push 1.0s with expo.out about 12.6x into the small logo mark in its sidebar while the tilt flattens and the UI fades, so the mark fills the frame at 328px on a warm light background (#efece4). Hand off to a vector mark of two quarter discs (ink and orange) on the same frame. The orange half leans back -20 degrees over 0.3s and returns with back.out(2.2). Then the mark slides left 322px over 1.3s with expo.out while the four-letter wordmark is revealed by a clip-path edge that follows the mark's right side, each letter sliding out from behind the mark 0.08 seconds apart and going from blur 12px to sharp over 1.25s. Fade in a monospace tagline at 6.3s, and keep a slow scale push from 1 to 1.05 through the hold.
People describe it as
- The logo appears first, then the brand name grows out
- The mark slides aside and the name pulls out from behind it
- The name pops out letter by letter from the middle to both sides
Often confused with
- Chromatic StretchChromatic Stretch locally distorts the wordmark itself with RGB ghosting; Mark-to-Wordmark Unfold is about the order in which the mark and the wordmark appear.
- Foreground Wipe & FlashForeground Wipe & Flash is a transition between scenes; Mark-to-Wordmark Unfold is often followed by a white flash.
More Ending
