A hero that becomes a card, over a running marquee

A full hero contracts into a card as you scroll, over a running marquee.

05 / Scroll choreography

Sampleton Rowing Club · Hertford

Faster on the water, every Saturday.

Learn-to-row courses start each month. Boats, coaching and tea provided.

Remake it

Build one interactive web page: Pinned and scrubbed by scroll: the full hero contracts into a card and loses its colour, a two-face marquee runs behind it and a signature draws itself.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: A brand with one strong opening image and a story to tell next: clubs, studios, launches. Do not let it fail the way this kind of piece usually does: Pinning without an end in sight, and running under reduced motion. This one stops pinning and shows the finished frame.

It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.

Notes: when it suits, when it does not, how it fails

When it suits: A brand with one strong opening image and a story to tell next: clubs, studios, launches.
When it does not: Pages visitors scan for facts. Pinning holds them in place, so the story has to earn it.
How it fails: Pinning without an end in sight, and running under reduced motion. This one stops pinning and shows the finished frame.

Measured on: landonorris.com · T5, T10. Built from scratch for an invented business; nothing here comes from the site studied.