Homepage: restyle the highlights gallery after Apple's

[ngnijland]

What

Restyles the Screenshots & Videos highlights gallery on /home-next/ after the highlights gallery on apple.com/macbook-pro.

Slides

• No border; slides use bg-surface, like the other borderless cards on the page.
• The title and description sit at the top of the card as one sentence (title white, description grey), on a blurred copy of the media that fills the card (MediaBackdrop gets a cover option).
• The media fits below the caption with rounded corners. It now shrinks to its own size rather than letterboxing inside a full-size box, so the radius lands on its real edges. Videos hold 16:9 until their poster loads (aspect-ratio: auto 16/9).
• Cards are 3:2 from sm, square on phones.

Page indicator and controls

• A borderless grey pill of 8px dots. The current slide's dot stretches into a 48px bar that fills white while autoplay shows it; the fill slides in, so its leading edge stays round.
• Autoplay now sets --autoplay-fill (0 to 1) on each fill and the presentation draws it; Tabs keeps its line via scale-x-[var(--autoplay-fill,0)].
• Previous/next arrows removed. The play/pause button stays (WCAG 2.2.2 requires a way to pause auto-advancing content) as a round grey button beside the dots (AutoplayControl's new round option).

Scrolling

• The current slide, its title and its dot follow the scroll as soon as the track passes halfway to the next slide, instead of after the track settles.
• Slides follow their distance from their resting place (--slide-offset, --slide-distance): media dims, shrinks and lags behind, and the backdrop swells and drifts further. Reduced motion keeps only the dimming.
• nearestIndex is replaced by slidePosition, a unit-tested fractional slide position that also handles the last slides resting short of their start on wide screens.

Testing

• npm run lint, format:check, typecheck, build, knip and npm test pass.
• Checked in the browser at desktop and phone widths: slide layouts for every item, mid-scroll effects, halfway activation, and dot jumps across several slides (only the target slide is marked and announced).

🤖 Generated with Claude Code