How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Timer: each story lasts 4s. Its bar fills left to right at a constant speed. When the story changes, the finished bar empties from the left in 0.3s and the next bar starts filling.
- Photo swap (1s, strong ease-out): - The new photo's container wipes open from the right edge (clip-path from a zero-width strip at the right to the full frame). - The old photo scales 1 → 2 and rotates 0 → −25°, then is removed. - The new photo scales 2 → 1 and rotates 25° → 0. - The photo layer sits at 75% opacity over black.
- Text roll: 0.4s after the click or timer, the current name slides up 24px and each title line up 48px (0.75s) inside clipped rows. The new name and lines rise from below starting at 0.9s. The profile initial and the link update at 0.6s.
- Guard: clicks during a change are ignored.
- Layout: the content column is 30% of the screen wide and centered, with 32px top and bottom padding. - Top: four 4px rounded bars 4px apart, then a 40px round avatar and a 16px name. - Bottom: a three-line title (36px heavy condensed uppercase, 40px rows) and the link. - Two small mono labels sit in the bottom corners.
- Link button: an uppercase heavy label with an underline that sweeps in from the left on hover (0.25s), and a round icon that spins twice on the Y axis on hover (0.8s) and back when the pointer leaves.
- 1000px and narrower: the column goes full width with 20px padding (80px at the bottom), the bars drop 160px, and title rows shrink to 28px type in 32px rows.
- Fallbacks: reduced motion swaps stories without spinning or wiping, and without JavaScript the first story shows.