Slide 01 / 07
Click the deck, then use the arrow keys like a real presentation.
Readout
- Family
- Signature
- Theme
- Light
- Type
- Jost
- Accent
- #2c5f8a
- Corners
- 2px
- Moves on
- Keys, wheel, swipe
- Studio
- Ready
06 of 30, Signature
Storey.
The deck is a seven-storey building in section; the tower rises past a fixed cut line and you live on one floor at a time.
How it moves
Cool drafting vellum, solid ink slabs and a 1.75 m scale figure, sober enough for a board, strange enough to remember. Use it when the argument is a sequence you descend rather than a set of unrelated screens.
This is the specification the Studio sends to the model, written for Storey's own look. Change the look in the Studio and every value follows.
Palette
- Background#e6e8e6
- Text#14181a
- Muted#6a706e
- Accent#2c5f8a
- Surface#ffffff
- Hairlinergba(20,24,26,.16)
Type: Jost. Corners: 2px.
Layout
- One continuous shaft, not seven screens. Every slide is a storey: position absolute, left = key + 2.4vw, right 6vw, top 50%, height --floor (82vh), padded --slab (2.6vh) top and 2.4vh bottom. Ground (#e6e8e6), ink (#14181a), one accent (#2c5f8a) and hairlines at rgba(20,24,26,.16). --radius is 2, so nothing is a rounded box.
- The poché is its own fixed layer, never part of a slide: eight solid #14181a bars, one above each storey plus a ground slab, each at top: calc(50% - --floor/2 + k * --floor), height --slab. The bar bleeds --bleed (6vw) past the right frame edge; its lettering does not, padding-right is calc(--bleed + --rgut + .9rem), so the level tag at the left and the datum at the right both land inside the frame, the datum on the building line beside the dimension column. Each reads a level and a datum reversed out in #e6e8e6 at .52-.7rem / .2em / tabular ("ROOF +25.20" … "L01 +0.00"). A 2px accent line sits on top of the slab the active storey stands on.
- Inside a storey. level tag + datum (.58-.74rem, .2em, uppercase, .95vh of air under the ceiling slab), then the title at clamp(2.1rem, 5.4vw, 7rem) / 500 / -.035em / line-height .96, then the lede. The evidence object is vertically centred in what is left. A right margin of 6vw + 4.2vw holds a 1.75 m scale figure (one 1.5px stroke, no fill, height 38.6vh = 1.75/3.6 of the storey, standing on the floor) and a floor-to-floor dimension leader.
- Objects are redrawn as a drafted schedule: cards, stats, compare panels and carousel items lose their background, border and radius and become a 2px rgba(20,24,26,.16) top rule with the text beneath; accent versions get an accent rule. Rings and stats share ONE grid, .rings is grid-template-columns: repeat(3,1fr) with justify-items: start and the same gap as .stats, so each 2px stat rule sits under its own ring instead of running off past the cluster on a wide screen. Kickers, whens and labels become .62rem / .18em uppercase tags. Secondary text is color-mix(in oklab, muted 84%, fg), plain muted is only 4.2:1 on this ground, and no text is ever dimmed with opacity on top of that.
Signature motion, the building moves, not the slide
- Storey. transform: translateY(calc(-50% + var(--d) * var(--floor))); opacity: calc(max(0, 1.04 - var(--ad) * .78)); filter: blur(calc(min(var(--ad), 2) * 2.6px)), 1050ms cubic-bezier(.65,0,.25,1) on all three. A neighbour sits one floor away at .26 opacity and 2.6px of blur, so a 9vh sliver of the storey above and below is always in frame and you watch the last slide's objects cut off behind their ceiling.
- Poché layer: translateY(calc(var(--i) * var(--floor) * -1)), same 1050ms and the same travel easing, but at full opacity, two heavy bars sweeping through the frame, which is what stops it reading as a page scroll.
- Structure beyond the cut (column hairlines and window heads, repeating gradients at --floor rhythm): translateY(calc(var(--i) * var(--floor) * -0.55)) over 1050ms cubic-bezier(.45,0,.15,1), a slower rate on a lazier curve, so the structure lags the storeys.
- Content waits. data-reveal-delay and data-animate-delay are both 900, so objects stagger in at 900 + j*90ms, after the tower lands. The dimension leader draws scaleY(0)→1 from its top over .76s cubic-bezier(.22,1,.36,1) at .44s, and labels itself at .92s.
- Only the active storey and its two neighbours are rendered. The ±1 window is CSS, not script, .slide[data-state="active"], its + .slide and .slide:has(+ .slide[data-state="active"]) set content-visibility: visible over a hidden default, so the deck is never blank if the format's script fails; a .near class from that script only extends the window for the 1150ms the outgoing sliver needs. Transitions are armed only after the engine's first placement is committed synchronously (html[data-ready]), so the deck opens at rest under any harness.
Orientation, the key section
- A fixed 13.5vw column at left (min 150px, max 264px) holding the same building at 1/13: seven buttons, each --band tall (clamp(42px, 6.4vh, 62px)) with a 2px #14181a top rule, a level tag at .58rem / .26em and the slide title at .78rem, over a hatched ground line. Future = color-mix(muted 88%, fg), done = color-mix(muted 38%, fg), active = full ink with an accent top rule. An accent cut bracket, two 1px arms and a small triangle, translates down the key by calc(var(--i) * --band) on the tower's own 1050ms glide, so the miniature and the building perform one gesture at two scales. A 2px accent shaft down the frame's left edge carries scaleY(var(--progress)) over .95s as the continuous measure. Head reads the deck name and "Section A–A"; foot reads "03 / 07" and "1:100 · datum +0.00 at L01".
- Under 760px the section becomes a plan: the key re-forms as a 9.4vh strip of seven bays along the foot with the cut marker travelling sideways, --floor rises to 86vh, and the scale figure and dimension column are dropped rather than shrunk. The demo's own .slide .timeline / .slide .step rules outrank components.css's phone block, so the media query restates them: the spine becomes top 0 / bottom 0 / left .35rem / width 2px, and .step::before moves to top .2rem / left -1.6rem.
The close (slide 7) inverts the format: at ground level the miniature is promoted to the subject, and only one section drawing is left on screen. The key rail hands over, its bands and ground line drop to opacity .14 (back to 1 on hover or focus, since they are still the nav) and the cut bracket goes, while the tower itself steps back: every slab except the one at grade falls to .2 and the column grid to .16, so the drawing owns the frame and the ground it is measured from stays solid ink. The drawing is an .oa-stage absolutely positioned down the building line, floor to ceiling (left 0, top .9vh, bottom 0, width --oaw = clamp(200px, 23vw, 460px)), a 2.3rem dimension column beside nine flex: 1 1 0 rows; the title, lede and numbered drawing notes are pushed to its right by the floorplate's padding-left. The section starts life registered exactly over the key section's miniature, eight lines of script measure both boxes once and set --flx/--fly/--fls, draws its bars scaleX(0)→1 from the left staggered 20ms from the ground up at 520ms while it is still hidden behind the key panel, then is pulled out of the rail and grows to scale 1 over 820ms on the tower's own travel curve at .84s. It lands at scale 1, so nothing is left rasterised soft. Level titles fade in at 1.5s, the overall dimension string draws scaleY(0)→1 down its left at 1.72s and labels itself "Overall 28.80" at 2.2s. The deck ends by measuring itself.
Navigation. ↓ → Space PageDown next, ↑ ← PageUp prev, Home/End, 1–9 jump, F fullscreen; wheel and trackpad move one storey per gesture; every level in the key section is a real button.