How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Wordmark (0.5 to 2.5): two uppercase lines of 32px type are filled with a two-tone gradient that slides up, so each line fills from the bottom in 1s. Line 2 starts as line 1 finishes.
- Credits in (2.5): the headers and each row appear instantly, one every 0.075s, in dim grey. The left column holds the project and director, the right column holds the location (half the column wide, centered).
- Highlight (from about 3.75): rows brighten to the light colour one by one (0.15s each, 0.075s apart), both columns together.
- Credits out (from about 5.0): rows disappear one by one from the top in the same rhythm.
- Grid in (2.5 to 3.9): a centred square 30% of the screen wide, with nine 1:1 cells 16px apart. Each cell opens downward from a zero-height strip at its top (clip-path), 0.05s apart, over 1s on a sharp in-out curve.
- Shuffle (3.5 to 6.35): every 0.15s, 20 times, the cells show a new random selection of stills. The wordmark fades out at the start of the shuffle.
- Grid out (6.4 to 7.8): each cell closes back up to its top edge.
- Reveal (7.8 to 8.3): the black overlay fades out and is removed. The page is not scrollable until then.
- Once per visit: it only plays on the first page load of a browser session.
- Under 1000px: the credit columns are hidden, the grid is 90% wide and the wordmark is 24px.
- Fallbacks: reduced motion and no JavaScript skip the preloader.