How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Card: the footer is 85% of the screen tall with 32px padding. Inside is a dark card with 32px padding and 32px corners, clipping everything inside it. A small mark sits in each of the four corners (32px in).
- Content: - The name is centred at the top (80px heavy condensed italic uppercase). - Four centred columns (32px apart, 128px above the bottom row) each have a heading in full colour and links at 35% opacity (20px condensed, 16px apart). - A credit line (14px mono uppercase, parts 32px apart) is centred at the bottom.
- Burst: it fires when the footer's top comes within 250px below the bottom of the screen. Ten 150px-wide photos with 16px corners start just below the card's bottom edge, from its horizontal centre. - Each gets a random sideways speed (up to ±10px per frame), an upward speed of 15 to 25px per frame, and a random spin (up to ±5° per frame). - Every frame, gravity adds 0.25px per frame downward, and speed and spin keep 99%. The loop stops once every photo has fallen well below the card.
- Re-arm: when the footer is back more than 100px below the screen, the burst resets and plays again next time.
- Under 1000px: the footer is a full screen tall, the second and fourth columns hide, the others stack, the credit stacks without its divider, and there is no burst.
- Fallbacks: reduced motion skips the burst.