How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- 0.5: the tags' words drop in from above (0.75s, 0.1s apart). The title letters rise into view from above, 0.05s apart.
- 2.0: every title letter except the first drops out downward, 0.05s apart.
- 2.5: the "10" rises in, one digit every 0.075s.
- 3.5: the first letter slides 21.25rem right and the "10" slides 8rem left (1s).
- 4.5: the first letter settles at 18rem right and 2.75rem up, scaled to 75% and weight 900 (a superscript). The "10" grows from 96px to 224px at weight 500 (0.75s).
- 5.0: a band from 48% to 52% of the screen height wipes in from the left, showing the page underneath (1s).
- 5.5: the tags drop out downward.
- 6.0: the dark screen splits at the middle. The top half slides up 50% and the bottom half slides down 50% while the band opens to the full page (1s). The split is seamless because a second, already-finished copy of the monogram sits behind as the bottom half.
- 6.25: the card opens from a horizontal centre line (0.75s).
- 6.5: the card's title rises in letter by letter.
- Layout: the title is centered at 96px weight 600 uppercase, and the "10" sits at 50% + 10rem. Tags are 13px uppercase, placed at 15% / 15%, bottom 15% / left 25%, and bottom 30% / right 15%. The page has a full-bleed photo, a nav and a footer with 2em padding, and a centered white card 30% wide and 70% tall with a 48px title.
- 1000px and narrower: 40px title, the "10" at 50% + 4rem growing to 96px, smaller offsets (9rem, 7.5rem, 1rem and 3rem), and a 75% wide card with a 40px title.
- Fallbacks: reduced motion and no JavaScript skip straight to the finished page.