Chapters.

A horizontal filmstrip with serif headlines and an enormous outlined chapter number.

Look

As designed

Use Chapters in the Studio Open full screen

How it moves

Editorial and slow. Slides glide sideways with a heavy ease while the giant numeral parallaxes behind. Best when the deck really is a sequence.

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

Palette

Background#dfe5ec
Text#10141a
Muted#5b6470
Accent#7a1f2b
Surfacergba(255,255,255,.55)
Hairlinergba(16,20,26,.14)

Type: Fraunces (display) + Instrument Sans (body). Corners: 12px.

Layout

A horizontal filmstrip. all slides sit side by side, each exactly 100vw × 100vh, inside a strip that translates by -(index × 100vw) over 850ms with cubic-bezier(.77,0,.18,1), a heavy cinematic ease that starts slow and lands firmly.
Each slide. 9vh 7vw padding, a two-row grid (header, body). Header = a small bold accent line "Chapter 02 of 07", then the title in the serif display face at clamp(3rem,6.5vw,7rem), weight 500, letter-spacing -0.02em, line-height .95, with the final word set in light italic (weight 300) for contrast. The cover title goes up to 9vw. Body sits under the header, max-width 62rem, objects with 1.6rem gaps.
Bottom-right, bleeding off both edges: the chapter number as an enormous outlined numeral in the display face: 34vw, weight 600, transparent fill, 1px stroke at 35% ink (-webkit-text-stroke), letter-spacing -0.05em, positioned right:-1vw bottom:-7vw. It parallaxes with translateX(d × 12vw) on the same 850ms ease, so numerals drift slower than the content and overlap the edges.
Body objects fade and rise (16px) one after another, 100ms apart, starting 500ms after the strip lands.
Bottom rail across the page (left/right 7vw, bottom 3.5vh): every chapter name in 0.8rem muted text; the current one is full ink with a 2px accent underline; clicking jumps.
Cards and boxes use a translucent white surface (rgba(255,255,255,.55)) rather than solid white so the cool ground shows through.

Navigation. ← → Space PageUp/PageDown move (↑ ↓ also work); bottom rail is clickable; Home/End; number keys. Use this format only for content that is genuinely sequential; the numbers are part of the story.