How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Frame: a 10vh header with a hairline under it and a 10vh footer with a hairline over it. Between them, an 80vh stage stays pinned while you scroll through the deck.
- Slides: stacked, the first on top. Each is split in half: - Left: a window 60vw wide and 200vh tall, rotated 12°, set 240px above and 144px in from the right edge of the left half. It shows a photo at 1.25× zoom, so the slide's inner edge is a clean diagonal. - Right: 8vw uppercase ultra-condensed text (75% width, line-height 1), one short line per row, with 160px side padding, vertically centred, over a sunburst of thin rays from the bottom-right corner.
- Steps: every 3 screen-heights of scrolling moves one slide on, so the deck is 3 × (slides − 1) + 1 screens tall.
- Leaving (3s, cubic-bezier(0.87, 0, 0.13, 1)): - Each word clips away from its right edge. It starts a third of the way into its curve, so the words are gone before the slide. - The whole slide wipes off leftward, its right edge sweeping to the left side, uncovering the next slide. - The photo slides left by 20% of its window and eases from 1.25× to 1×.
- Back: scrolling back over a step reverses that slide's move from wherever it is.
- Under 1000px: the photo takes the top 45% of each slide and the statement sits below it at 11vw with 24px padding.
- Fallbacks: reduced motion switches slides instantly.