How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Layout: the section has 32px padding. The left column is 60% wide and holds a 533px block: a small muted callout, a 40px statement and the pills. It sticks to the top of the screen for as long as the cards take to pass. The cards column starts at 60% and has 128px of padding top and bottom, with 32px between cards.
- Cards: dark panels with 16px padding and 16px corners. Each has a square photo (12px corners, 75% opacity), a 32px title and an 18px muted paragraph.
- Pills: 64 × 64px outlined boxes, 16px apart, 16px corners, each showing its number. - The active pill widens to 128px and fills with the light colour. Its number slides 24px right and a "Step" label fades in from 20px left (all 0.3s). - The active card is the one crossing the middle of the screen. Before the first card arrives, step 1 is active.
- Pills entrance: when the pills are 75% up the screen, they slide in from 40px left and fade in over 0.3s, the last pill first and 0.1s apart.
- Under 1000px: nothing is pinned. The pills are hidden, the statement is 32px, and the cards stack below the intro.
- Fallbacks: reduced motion keeps the active pill but switches it without sliding. Without JavaScript the pills show with step 1 active.