Ultimate · media viewer

A lightbox, not a surface

Every step in Stepo carries media — a photo or a video; the composer requires it. Today a step carries one; if steps ever carry several, this viewer becomes a horizontal pager with faint page dots and nothing else changes — the contract below is per-media. Cards are navigation — tapping a feed card, chapter card, or grid tile (media included) opens the step detail, which shows the media whole; only the detail's media tap opens this viewer. Glance-crop → whole media → zoom: each tap earns more of the image. This is that viewer, and its whole discipline is restraint: it is a lightbox, not a surface. It adds nothing to the media, carries zero social actions, and leaves exactly the way it came. Media sits on carbon — the app's dark video surface — shown whole and letterboxed, never cropped. No context travels in at all: the note, the date and every social act stayed on the step, one dismiss away — and step detail, the only screen that opens this one, still has them.

The stance, in one line: the viewer's job is to disappear. Chrome is --w on carbon with zero accent — one X and (for video) a thin transport — so nothing on screen competes with the moment you opened it to see.

01 Photo — chrome visible

The default on open. A photo centered at its natural aspect, letterboxed by carbon — never cropped, never stretched. Chrome is two things only: a round X hit-area top-left on a faint dark disc. Top-right is nothing, and so is the bottom edge.

One X — that's the whole chrome

Nothing is carried in. Who posted, the note, the date, hearts, comments, the journey — all of it stayed on the step, which is the only screen that can open this one. Entering is a shared-element move: the media fades and scales up from the tapped media; leaving reverses it back into place.

  • X sits top-left on an rgba(0,0,0,.25) disc; top-right carries nothing.
  • No caption (2026-07-16). It read the step's note, which is free text — one line in a mock, a paragraph in life — and step detail already shows it whole.
  • The bottom edge is clean on a photo: no scrim, because there is no bottom chrome to keep legible. The scrim returns for video, under the transport.
  • Enter = fade + scale from the tapped media; dismiss reverses the same transition.

02 Chrome hidden

The same stage, the same photo, zero chrome — pure carbon and media. A single tap toggles the chrome away and back. The viewer opens chrome-visible every time and remembers nothing about the last state.

A tap clears the room to nothing but the media

Chrome is a veil you can lift and drop with a single tap. It is state, not memory — reopen the viewer and it is chrome-visible again. Zoom hides chrome too: pinch or double-tap to enlarge, and while zoomed a swipe pans the photo rather than dismissing.

  • Single tap toggles chrome; the viewer defaults to chrome-visible on open.
  • It remembers nothing — no sticky "chrome off" preference between opens.
  • Pinch / double-tap to zoom (which also hides chrome); swipe then pans.

03 Video

A step's video, on the same carbon stage. A centered play / pause glyph, and a thin transport at the bottom: a 2px line where the played portion is --w and the rest is --wline, a small round scrub handle, and elapsed / remaining times below it. No fullscreen button — it already is.

0:42−0:18

Sound is on — because opening it is intent

The feed autoplays muted; the viewer is where you chose to watch, so it plays with sound on. Tap toggles play / pause; the thin line scrubs. There is no fullscreen button because the viewer already is fullscreen, and the transport fades away with the rest of the chrome on a tap.

  • Sound on in the viewer, muted in the feed — intent draws the line.
  • Tap = play / pause; the 2px line scrubs; a round --w handle marks the head.
  • No fullscreen button (it already is); transport fades with the chrome.

04 The dismiss gesture

Caught mid-drag. Swipe down and the media follows your finger — translating down, scaling toward 0.82 — while the carbon scrim thins and the paper step screen fades back in behind it. Chrome is already gone. The X is there for the tap-minded; the gesture is the real door.

The media follows the finger; the room fades back in

Swipe-down dismisses from anywhere, at any zoom level — the media tracks your finger and the carbon scrim thins to reveal the step screen you came from. Release past the threshold and it completes; release short and it springs back. The X exists for people who'd rather tap, but the gesture is the primary way out.

  • Swipe-down works from any state and any zoom level — one consistent exit.
  • Media follows the finger (translate + scale); the room fades in behind it.
  • Past threshold completes; short of it springs back to full-screen.

05 Bright lines

The rules that keep the viewer a lightbox instead of another feed surface. Every social act, every affordance that would turn the media into a place, lives elsewhere — on the step, one dismiss away.

What the viewer holds to

The viewer's job is to disappear.

Scope & status. The full-screen viewer opens from the step detail's media tap — cards across the app navigate to the step, never straight here — and closes back into the exact element it grew from. It owns no data of its own — it renders the media and nothing else. All engagement (hearts, comments, share, step-with, the author and journey chrome) belongs to the step, which is always one dismiss away. Carbon is the same dark surface the app uses for video elsewhere; the viewer simply extends it to photos so every moment is shown on the same quiet ground.