feat(dashboard): align the cinematic hero with the details pages

The hero's primary is the same light Continue/Play as the details pages
and its chips are the shared meta chip. A title without a 16:9 backdrop
gets the blurred poster alone as the stage (the sharp key-art copy is
gone; a live channel's logo still sits on the right). Series titles drop
their season marker. The hero is a focusable region: ←/→ switch slides,
Enter follows the primary action, and rotation pauses while the document
is hidden.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
4grayandClaude Fable 5.1 committed 2026-10-02 08:55:51 +02:00
1 parent c2f5d67120
commit aac8021553
9 files changed
+193 -58

No files matched your search

+11 -3
View File
@@ -132,13 +132,21 @@ discovery slides open the detail page; live slides open the channel. TMDB
extras (backdrop, rating, genres, overview, year) come from
`DashboardHeroTmdbService` per featured title and vanish when TMDB is off.
Artwork: a title's backdrop, else its poster blurred and scaled past the
edges (no second, sharp copy); a live channel's logo sits on the right as key
art over its own wash. Series titles drop their season marker
(`splitSeasonSuffix`) — the `S1·E1` chip names the season. Chips are
`app-meta-chip`; the primary is the details pages' light primary
(`light-primary-button` from `libs/ui/styles`).
Rotation is the active dot's CSS fill animation (8 s); its `animationend`
advances. The fill animates `transform` only (a bar sliding in under the
pill's rounded clip), so it runs on the compositor; animating `width` there
cost a style, layout and paint pass on every frame of an idle dashboard.
Hover, focus inside the hero and the pause button pause it; an
explicit Play clears the hover/focus pause until they re-arm; under
`prefers-reduced-motion` nothing auto-advances. The active slide is tracked
Hover, focus inside the hero, a hidden document and the pause button pause
it; an explicit Play clears the hover/focus pause until they re-arm; under
`prefers-reduced-motion` nothing auto-advances. The hero is a focusable
region: ←/→ switch slides and Enter follows the primary action. The active slide is tracked
by id, so a late live slide never moves the user off the current one. Test
hooks: `dashboard-hero`, `dashboard-hero-slide` (`data-hero-kind`),
`dashboard-hero-dot`, `dashboard-hero-pause`,