Skip to content

Slide 01 / 07

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

Readout

Family
Signature
Theme
Light
Type
Bodoni Moda + Work Sans
Accent
#cc2936
Corners
2px
Moves on
Keys, wheel, swipe
Studio
Ready

05 of 30, Signature

Overprint.

Every title is printed twice, black key and spot red, and each slide change knocks the two plates out of register, then walks them back while the last impression is still on the paper.

Look
As designed

How it moves

A two-colour press sheet on warm paper, with crop marks, registration targets and a density bar that all carry information. Use it when the argument should feel manufactured rather than projected, a studio year, a brand review, anything that earns a didone and one spot ink.

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

Palette

  • Background#f2ece2
  • Text#1b1713
  • Muted#8a8073
  • Accent#cc2936
  • Surface#fbf7ef
  • Hairlinergba(27,23,19,.16)

Type: Bodoni Moda + Work Sans. Corners: 2px.

Layout

  • One sheet of warm paper (#f2ece2) edge to edge inside a fixed .press layer, with a trim box inset clamp(28px,5vh,52px) vertically and clamp(28px,4.4vw,92px) horizontally. The trim is a 1px hairline of rgba(27,23,19,.16) at ~52% alpha carrying four crop marks (a 15px x 1px rule and a 1px x 15px rule, each starting 10px clear of the corner) and a 26px registration target centred on its top and bottom edges. This furniture never moves: the sheet moves under it.
  • Inside the trim, top to bottom: a 30px slug line (.58rem / 500 / .16em / uppercase, colour = color-mix(in oklab, #8a8073 52%, #1b1713), deck name, job number, date, a live REGISTER 0.084 EM readout and SHEET 03 / 07), then the impression area, then a 56px colour bar. All seven slides stack in ONE grid cell of the impression area. That cell is overflow:hidden, but it is clipped --bleed: clamp(10px,1.1vw,18px) OUTSIDE the trim and every slide carries the same value as horizontal padding, so the type still aligns exactly to the trim, yet a plate travelling left on a backward move runs off the sheet edge instead of being sliced in half by it.
  • THE TITLE IS PRINTED TWICE, in the same place. A key plate in #1b1713 and a spot duplicate in #cc2936 at mix-blend-mode:multiply sitting underneath it. Display face at clamp(2.1rem,4.4vw,5.4rem) / 700 / -.022em / line-height 1 / max-width 13em (cover clamp(2.6rem,7.6vw,9.6rem) at -.034em / max-width 6em; closing slide clamp(2.3rem,5.6vw,7.2rem)). The plate must outrank every object on the sheet at every width, so the stat numerals come down to clamp(2rem,3.4vw,3.4rem), 56px against 44px at 1280. Force a LOW optical size, font-optical-sizing:none; font-variation-settings:'opsz' 12, so the didone hairlines survive at 97px.
  • REGISTRATION IS THE STATE VARIABLE, not decoration. --reg: calc((1 - var(--progress,0)) * (1 + var(--progress,0)) * .095em), that is (1 - p²) in plain calc, so the fringe HOLDS through the middle of the run (sheet 2 still prints .092em, sheet 6 .029em) and the collapse is spent on the last sheet, where the payoff is; a linear (1-p) has sheet 6 down to .016em and there is nothing left to reveal. The spot plate rests at translate(--reg, --reg*.56), sheet 7 registers exactly, the only time in the deck, the slug prints the live figure and the top target's red plate is offset by the same curve scaled to 3.1px, so the instrument reads out what the type is doing.

Signature motion, the impression

  • Each slide authors its own registration error as inline --px / --py (about -1.1 to 1.1). With --t: clamp(-1.3, var(--d,0), 1.3) the sheet sits at transform: translate(calc(var(--t)*var(--px)*2.4vw), calc(var(--t)*var(--py)*2.6vh)), zero when active, its own offset on either side, clamped so a 1-to-7 jump does not fly.
  • On a change the two plates tear apart and walk back together: .key at translateX(calc(var(--t)*.85vw)) while .spot travels translate(calc(var(--reg) + var(--t)*-2.3vw), calc(var(--reg)*.56 + var(--t)*1.05vh)), opposite directions, 2.7x the distance, both 1150ms cubic-bezier(.65,0,.25,1). The incoming sheet arrives over 1050ms on the same curve, with opacity 820ms cubic-bezier(.22,1,.36,1) 150ms.
  • THE DOUBLE IMPRESSION IS THE FORMAT, and a transition cannot produce it, every ease dumps the whole fade at one end, which ships a 110ms flicker rather than a second pass. The outgoing sheet runs a keyframe instead: @keyframes second-pass, 620ms linear, animation-fill-mode NONE, opacity 1, .36 at 17%, .26 at 60%, 0 at 100%. It lifts most of its ink at once and then HOLDS a legible impression on the paper, multiplying, out of register, while the new one prints over it; measured on a real change both sheets are above .2 opacity from ~150ms to ~420ms. fill:none is load-bearing: a filled departure outranks the active rule and would pin a slide that comes back at opacity 0.
  • Then the bite. .trim (hairline plus crop marks, never any text) runs a 1060ms keyframe holding scale(1) to 54%, squeezing to scale(.9928) at 67% on cubic-bezier(.65,0,.25,1) and settling back on cubic-bezier(.22,1,.36,1); the bottom target's dot flashes opacity 0>1>0 with scale(.4>1>2.3) on the same clock. Restart both with classList.remove('run') → el.getBoundingClientRect() → classList.add('run'). NOT the usual void el.offsetWidth: the dot is an SVG <circle>, SVG elements have no offsetWidth, the read flushes nothing, the remove/add coalesces, and the strike then plays exactly once, on load, and stays parked on its filled end state for the rest of the deck. Content follows the move: data-reveal-delay and data-animate-delay are both 900.
  • Cost control, because multiply is the expensive part: mix-blend-mode:multiply goes only on the slides within one step of the active one (.near) and on the single slide that just left (.leaving), both set by the format's own deck:change handler, so exactly one extra subtree is ever composited however far the jump; the active sheet is always normal; and there is no blur anywhere, this format resolves by registration, not by focus. The ground can be flipped from the URL, so the JS measures the luminance of --bg on the first change and sets data-ground="dark" on <html>, which switches every plate from multiply to screen, on a near-black ground multiply takes the spot plate to nothing and the mechanism disappears. And because the assigned #8a8073 is only 3.3:1 on this paper, .press redefines --muted to the readable ink so every shared object inherits legible secondary type; the :root token itself stays exactly as assigned.

Orientation, the colour bar

  • Seven press patches in one row along the foot, each a real <button type="button" data-goto> with its slide title beneath at .58rem / .13em / uppercase. Future: an empty 15px box with a 1px rgba(27,23,19,.16) rule, label at color-mix(in oklab, #8a8073 52%, #1b1713). Done: an inner bar at scaleY(.42) in color-mix(in oklab, #cc2936 34%, transparent). Active: scaleY(1) in solid #cc2936, accent border, label #1b1713 at 600, density plus geometry, the way a pressman reads a sheet. Above it, a 2px rgba(27,23,19,.16) feed rule whose accent fill is transform: scaleX(var(--progress,0)) over 1s travel ease. Radius is 2 throughout; cards, compare panels and quotes lose their boxes and become 1px rules, so everything is ink on paper.

The closing sheet

  • Slide 7 scales the whole .press to .87 and lifts it 1.4vh over 1100ms, so for the first time the crop marks read as the edge of a finished sheet lying on a darker table (color-mix(in oklab, #f2ece2 80%, #1b1713)). The six earlier impressions come back at opacity .09, title plates only, each parked at its own --px/--py scaled to 5.4vw / 7vh, and they keep multiplying, so where the run crosses itself the ink builds. The departing sheet skips the second-pass keyframe here and instead holds full ink for 300ms before settling into the stack. Its two plates coincide exactly, the colour bar fills solid, the feed rule completes and the slug gains APPROVED in accent.

Navigation. arrow keys, Space, PageUp/PageDown, Home/End and 1-9; wheel and trackpad (750ms lock); touch swipe; and clicking any patch in the colour bar.