Scrollytelling Cinematic

---
name: scrollytelling-cinematic
description: Apply the Scrollytelling Cinematic visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Scrollytelling Cinematic, mentions scrollytelling, scroll-driven storytelling, cinematic scroll, or describes full-viewport pinned scenes, scroll-scrubbed animation, chapter title cards — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Scrollytelling Cinematic Design System

The page as a film the reader projects at their own speed: full-viewport pinned scenes, scroll-scrubbed animation timelines, chaptered pacing with title cards, cinematic dark grounds, and captions that fade in like subtitles.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Scrollytelling Cinematic.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (scrollytelling, scroll-driven storytelling, cinematic scroll, pinned scroll sections, scroll-scrubbed narrative), or describes its traits: full-viewport pinned scenes; scroll-scrubbed animation; chapter title cards; cinematic dark ground; subtitle-style captions; sequenced image frames.

## Design tokens

### Color palette

- Cinematic near-black ground: `#0b0d12` (--color-bg)
- Caption panels and UI chrome: `#141824` (--color-surface)
- Primary text, projection white: `#eef0f4` (--color-text)
- Captions, chapter numbers, metadata: `#9aa2b1` (--color-text-muted)
- Warm amber for highlights, progress, and key moments: `#d9a648` (--color-accent)
- Cool blue for diagrams and secondary emphasis: `#5b8def` (--color-accent-2)
- Hairline edges on panels and rules: `#232a3a` (--color-border)

### Typography

- Display / headings: Instrument Serif (fallback: Georgia, serif)
- Body: Figtree (fallback: Helvetica Neue, Arial, sans-serif)
- Mono / data: Geist Mono (fallback: Menlo, monospace)
- Type scale: 1.333 ratio, base 18px — computed steps: 18px / 24px / 32px / 43px / 57px / 76px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.1, letter-spacing -0.01em
- Body: line-height 1.7, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 40, 64, 96, 160, 240 — Paced like edited film: scenes fill the viewport completely, then breathe through long empty transitions. Text arrives in short subtitle-length passages, rarely more than three lines at once.
- Border radius: none 0px, sm 6px — Mostly edge-to-edge scenes; small rounding only on caption panels and UI chrome.
- Border treatment: 1px solid #232a3a — Hairlines on caption panels and the progress rail; scenes themselves are borderless full-bleed.

### Shadows

- caption: `0 4px 24px rgba(0, 0, 0, 0.5)` — Caption panels floating over imagery
- vignette: `inset 0 0 120px rgba(0, 0, 0, 0.55)` — Scene edges — cinematic vignette on full-bleed media

### Layout

- Max content width: 1920px
- Scenes are 100vw x 100vh; reading copy sits in a centered 680px column between scenes
- Chapter title cards (number in mono, title in serif) separate acts
- A thin amber progress rail tracks position through the whole story
- Captions dock to a consistent lower-third position like subtitles

### Effects

- Scroll-scrubbed image sequences or video frames in pinned sections
- Ken Burns drift on stills between scenes
- Cinematic vignette and letterboxing bars on key scenes
- Text fading in word-by-word at chapter openings

### Motion

- Easing: linear for scroll-scrubbed timelines; cubic-bezier(0.22, 1, 0.36, 1) for entrances; durations 200ms / 600ms / 1200ms
- Scroll position drives the timeline — animation progress maps 1:1 to scroll, never autoplay-on-entry for pinned scenes
- Captions fade and rise 12px as they enter the lower third
- Under prefers-reduced-motion, pinned scenes collapse to static keyframe images with captions

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0b0d12;
  --color-surface: #141824;
  --color-text: #eef0f4;
  --color-text-muted: #9aa2b1;
  --color-accent: #d9a648;
  --color-accent-2: #5b8def;
  --color-border: #232a3a;
  --radius-none: 0px;
  --radius-sm: 6px;
  --shadow-caption: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-vignette: inset 0 0 120px rgba(0, 0, 0, 0.55);
  --border-default: 1px solid #232a3a;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: Figtree, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", Menlo, monospace;
  --text-base: 18px;
  --leading-heading: 1.1;
  --leading-body: 1.7;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: linear for scroll-scrubbed timelines; cubic-bezier(0.22, 1, 0.36, 1) for entrances;
  --duration-fast: 200ms;
  --duration-base: 600ms;
  --duration-slow: 1200ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400&family=Figtree:wght@400;600&family=Geist+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Minimal overlay: wordmark and a chapter index that appears on scroll-up, over a gradient scrim
- **Hero:** Full-viewport opening scene: one serif line resolving over slow-drifting imagery, scroll cue pulsing gently at the bottom
- **Card:** Caption panel: dark surface at 90% opacity, 6px radius, caption shadow, short text in Figtree with a mono chapter marker
- **Button (primary):** Amber fill, near-black text, 6px radius; used sparingly at story end for the call to action
- **Button (secondary):** Ghost button, 1px hairline border, projection-white text
- **Form fields:** Dark surface fill, hairline border, generous 16px padding; focus brightens the border to amber

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The pinned scene: a section that locks to the viewport while scrolling scrubs its internal timeline — an image sequence playing, a diagram assembling, a headline resolving — before releasing the page to the next chapter card. Spend boldness here; keep everything else quiet.

## Do

- Storyboard first: every pinned scene needs a beginning, middle, and end state before any code
- Keep copy in subtitle-sized doses; long paragraphs belong in the between-scene column
- Give the reader a progress rail and chapter index so the scroll never feels endless
- Precompute and compress image sequences aggressively; jank destroys the cinema

## Don't

- Don't hijack scroll speed or momentum — scrubbing must track the user's actual scroll
- Don't pin more than 3-4 scenes per story; fatigue sets in fast
- Don't put critical information only inside animations
- Don't autoplay sound, ever

## Accessibility notes

- Provide a full static fallback under prefers-reduced-motion — keyframe stills with captions must carry the complete narrative
- All content inside scroll-scrubbed canvases needs an accessible text equivalent in the DOM
- Amber accent on the dark ground passes for large text and UI, but body copy should stay in projection white
- Pinned sections must remain keyboard-navigable; never trap focus inside a scene

## Reference sites

- Apple: https://www.apple.com
- Shorthand: https://shorthand.com
- Scrollama: https://github.com/russellsamora/scrollama

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip scrollytelling-cinematic.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/scrollytelling-cinematic.json

Settings → Capabilities → Skills → Upload skill → scrollytelling-cinematic.zip