Skip to content

Slide 01 / 07

Click the deck, then use the arrow keys like a real presentation.

Readout

Family
Spatial
Theme
Dark
Type
Inter Tight
Accent
#f05a1e
Corners
18px
Moves on
Keys, wheel, swipe
Studio
Ready

09 of 30, Spatial

Focus Stack.

A vertical wheel of titles; the active one snaps into focus, the rest fall into blur.

Look
As designed

How it moves

Dark, cinematic, keynote-like. Every title stays on screen, tilted and blurred by distance. Content appears on the right once the wheel settles.

This is the specification the Studio sends to the model, written for Focus Stack's own look. Change the look in the Studio and every value follows.

Palette

  • Background#0a0a0a
  • Text#ffffff
  • Muted#7a7a7a
  • Accent#f05a1e
  • Surfacergba(255,255,255,.05)
  • Hairlinergba(255,255,255,.12)

Type: Inter Tight. Corners: 18px.

Layout

  • Full-bleed dark stage (#0a0a0a), no chrome, nothing centered. Two zones: a title stack pinned to the left (7vw from the edge, vertically centered on the viewport) and a content zone on the right half (from 50vw to 94vw, vertically centered).
  • Every slide title lives permanently in the stack as one line of bold display type: 4.4vw, weight 700, letter-spacing -0.025em, line-height 1. A short horizontal dash (3.4vw wide, 3px tall, 2px radius) sits 1.6vw to the left of each title; the dash is the pivot.
  • The active title is crisp and full contrast (#ffffff) at scale 1 and its dash is the accent (#f05a1e). Every other title is styled purely by its signed distance d from the active one (…, -2, -1, +1, +2, …), with a = |d|: transform: translateY(d × 15vh) rotate(d × 6deg) scale(1 - min(a,3) × 0.16), transform-origin left center; filter: blur(min(a,4) × 2.2px); opacity: 1 - a × 0.34; color: dim gray (#5d5d5d), dash the same gray. Read together the titles form a vertical wheel seen from the side: the title above tilts up to the right, the title below tilts down to the right, and everything else falls off into depth-of-field blur until it disappears.
  • Moving one slide rotates the whole wheel one notch: every title animates transform, blur and opacity over 700ms with cubic-bezier(.22,1,.36,1). Nothing else on the page moves during that.
  • The active slide's body content then fades and rises into the right zone (opacity 0→1, translateY 30px→0, 600ms, delayed 300ms so the wheel settles first). Content is a column with 1.6rem gaps, starting with a muted lede line. The cover slide leaves the right zone almost empty (one lede line at most); that near-empty frame with the wheel alone is the signature image of this format.
  • HUD. slide counter "02 / 07" bottom-right in muted 0.9rem tabular figures; a one-line hint ("Scroll or press ↓ to move") bottom-left that disappears after the first slide.

Navigation. ↓ → Space PageDown = next; ↑ ← PageUp = prev; mouse wheel / trackpad moves one slide per gesture (debounced 750ms); clicking any title in the stack jumps to it; Home/End; number keys 1-9 jump.