Up Next — State Variants

Design reference, not a real page. The Up Next block on a show detail screen takes on seven distinct shapes depending on where the viewer is in their relationship to that show. Each section below shows one of those shapes, with the conditions that trigger it and a brief note on what changes.

Treat this file as a spec when implementing — copy the markup for the state you need, adjust the data, and you're done. Live demo at 18-show.html shows State 2 in context.

State 1 — Never Started

User has the show on a list (or it was just recommended) but has not watched any episode yet. Pilot is the obvious first stop, with an escape hatch to skip it.

57 MIN
▶ Start Here S1 · E1 · Feb 18 2022

Good News About Hell

Mark begins his first day overseeing a new colleague, Helly, whose "innie" resists the severance procedure with increasing desperation.

Chip reads "Start Here" instead of "Up Next". Secondary action is a skip-the-pilot escape hatch instead of "Browse episodes".

State 2 — In Progress · default surface on the show detail page

User is partway through a season. The next unwatched episode is queued with a backdrop still, runtime, IMDb score, full watch ribbon, and the recap toggle for stepping back into a paused show.

54 MIN
▶ Up Next S2 · E5 · Nov 2 2023 Browse episodes

Science/Fiction

After everything blows up, Loki finds himself in an empty universe with only one thing to do: figure out how to bring everyone back.

The canonical shape. Every later state is a deviation from this baseline.

State 3 — Currently Airing · Caught Up Mid-Season

Show is airing weekly and the user has watched every episode released so far. They are now waiting for the next drop. We surface the airdate, mute the launcher, and offer a notify-me action.

TBA
▶ Airing Friday S2 · E6 · airs in 3 days Browse episodes

[Episode title TBA]

HBO has not yet released a synopsis for this episode. Synopses typically post 24–48 hours before airtime.

Airs Friday on Max 9pm ET · 3 days out

Still is greyscale-tinted via .un-anticipation. Watch button is replaced with a muted "Notify me" pill. No Mark watched (nothing to mark yet).

State 4 — Caught Up · New Season Coming

User has finished every season that has aired. A new season has been formally announced with a release date. The block shifts from episode-level to season-level anticipation.

~30 MIN
▶ Coming Soon S4 · E1 · premieres March 15, 2026 Browse past seasons

Season 4 Premiere

FX has confirmed Season 4 will premiere March 15, 2026. New cast announcements coming in late February.

Premieres March 15 on Hulu ~10 months out

Last season finished Aug 2024 · You rated it Loved It

Same anticipation treatment as State 3, but the episode line surfaces a season-level milestone, not a weekly airdate. The italic status line at the bottom is unique to this state — it reminds the user where they left off and what they thought of it.

State 5 — Hibernation · Caught Up, No New Season Announced

User is caught up. There is no announced continuation, but the show has not been formally cancelled either. The block collapses to a quiet "you're caught up" state with offer to hibernate (hide the show until news breaks).

✓ Caught Up

You're caught up on Loki

No new season announced. The Season 2 finale aired November 9, 2023. We'll alert you when there's news.

No still, no watch button, no mark-watched. .un-reflection collapses to a single column. Chip uses the dim variant since this isn't an active "go watch something" moment.

State 6 — Fully Completed

Show has definitively ended and the user has watched all of it. The block pivots from "what's next" to "what now" — celebrate the finish, offer canonization, set up a future rewatch.

✓ Completed

You finished Breaking Bad

Completed April 2024 · You rated it It Was Great · 62 episodes watched

Same shape as Hibernation (collapsed, dim chip), but the action set is celebratory and forward-looking rather than holding-pattern. The "Suggest rewatch in 2 years" link wires into the Rewatch Cooldown system from 03-list.html.

State 7 — Rewatch Mode

User completed the show previously and has started an explicit rewatch. The launcher returns to full In Progress shape, but the chip, recap, and a small status line below the block all acknowledge this is pass two (or three).

22 MIN
▶ Rewatching · 2x S3 · E12 · originally aired Jan 11 2007 Browse episodes

Back from Vacation

Michael returns from Sandals Jamaica with poor souvenirs and a leaked photo problem.

Rewatch pass 2 of 2 · started Mar 2026 · 11 of 76 episodes this pass

Visually identical to State 2 — the only signals that this is a rewatch are the chip text and the monospace status line below the frame.