The hook-card style, animated
Your nine thumbnails read as ONE system, so I rebuilt it as seven separate elements that each
get their own beat. Three variants below: a money card, a red-block zero card, and a real-thumbnail card.
Everything is drawn by the engine - no After Effects, no image of a card.
The seven elements, and when each one moves
- Page - flat off-white with a soft centre glow. Static, always.
- Headline - huge black caps, one line at a time, each rising up + fading in.
- Hot line - the number, green (or white on a solid red block). It punches: lands oversized
and snaps back, AFTER the black lines have settled.
- Subline - the small grey lowercase line, fades up last.
- Card - flies in from the right and settles into a 4 degree tilt, with a pale card peeking behind
it. Inside: grey label, number counting up, delta triangle, and a trend line that draws
itself - rising green for money, falling red for zero.
- Badge - the green pill (views / SOLD) pops onto the card's corner with a little overshoot.
- Swoosh - the thick red arrow draws from the headline to the card, and the solid head lands
on the last frame of the draw.
Why it is worth having as a system
- Any video can now open on one of these, and any beat mid-video can become one - swap the words, the
number and the picture.
- The headline auto-shrinks so a long line can never slide under the card.
- The card tilts as one rigid group, contents included.
- Nothing is invented: the number, the label and the picture are passed in.
Code: autopilot/hookcard.py (the seven parts) +
autopilot/_build_hookdemo.py (this reel).