How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- 0 to 4: a 7px accent bar at the very top grows from the left (power3.inOut). 4 to 5: it shrinks away to the right.
- Photos: a 400px square frame sits at 45% down the screen. - Each photo is revealed from the bottom (clip-path from a zero-height strip at the bottom to the full square) over 1s, starting at 0, 0.75, 1.5 and 2.25. - Inside each, the image eases from scale(2) to 1 over 1.5s, starting a quarter second earlier. - Photos have 12px corners.
- Name in (0 to 1.3): the letters are masked. Even letters drop in from above and odd ones rise from below, 25ms apart.
- Name out (2.5 to 3.8): even letters leave downward and odd ones upward, again 25ms apart.
- 3.5 to 4.5: the photo frame collapses to its top edge.
- 4.5 to 6.25: the dark screen collapses to the top edge, revealing the page from the bottom up. It stops catching clicks as soon as this starts.
- Name: 128px heavy condensed uppercase with −8px tracking, centered, 60% down the screen.
- 1000px and narrower: a 48px name with normal tracking and a 320px frame.
- Fallbacks: reduced motion and no JavaScript skip the preloader entirely.