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.
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.
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.
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.
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).
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.
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).
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.