Story scroll
The heart of a case study: “slides” with a pinned visual and scrolling copy (Figma 104:816). Needs a full page, so see it live.
Live: Governance case study. Made for a 1496 × 848 laptop first.
How it behaves
- From 1024: the visual pins to the top-right corner, touching the chapter bar, and bleeds off the page edge. It fills the height under the bar (1082 × 770 at 1496 × 848) but always leaves the copy column at least 360 wide. Only the copy scrolls, starting 64 below the bar.
- Below 1024: stacked per step: title, visual, copy. A visual repeated from the previous step isn't shown again.
- Switching: the step at mid-screen picks the visual. Steps that share an image share one frame: the visual holds still and all their text is full strength; text for other visuals dims to 25%.
- One transition: every visual change is the same cross-fade, so a whole case study (Problem → Results) is one StoryScroll, never a hand-off between sections.
Content rules
- Every visual is 1040 × 740 (
--story-visual-ratio), so the stage never jumps. - One step, one idea: 40–90 words, written in the step's slot (
step-0,step-1…) with the article text styles. - Alternatives (design directions, Beta requirements) are one step each with their own visual, as a numbered list continued across steps (
--list-start), untitled.
<StoryScroll steps={[
{ id: 'problem', label: 'Problem', title: 'No place for powerful governance', image: before,
action: { href: 'https://figma.com/proto/…', label: 'View prototype' } },
{ title: 'What was at stake?', image: before }, // same image: same frame
{ quote: { text: '…', name: 'Intranet Operations Lead', role: 'Enterprise Software Company' } },
]}>
<Fragment slot="step-0"><p>…</p></Fragment>
<Fragment slot="step-1"><p>…</p></Fragment>
</StoryScroll>Step
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Eyebrow above the title, usually the chapter. |
title | string | — | H2. Leave out for a step that only continues a list. |
subtitle | string | — | H3 under the title. |
id | string | — | Anchor for a chapter start. |
image | { src; alt } | — | The visual (1040 × 740). |
action | { href; label } | — | Primary button floating on the visual, centred near the bottom (Figma 118:1253), e.g. "View prototype". |
quote | { text; name; role } | — | A customer quote as the visual (Story quote, below). |
color | string | — | Placeholder visual colour while there is no image. |
Story quote
A customer quote as a step's visual (Figma 132:1466): text on the article band, not an image, so
it's crisp and light. All sizes are Figma pixels of the 1040-wide visual times
--story-px, so it scales with the visual.
Honestly, when I opened this, I was like: ‘Yes! This is so much easier.’
Tokens
| Token | Base | ≥ 1024 | Note |
|---|---|---|---|
--story-visual-ratio | 1040 / 740 | ||
--story-visual-width | 0px | min(calc((100dvh - var(--chapter-nav-height) - var(--story-visual-top)) * 1040 / 740), calc(100% - var(--story-copy-min-width))) | ≥ 1024: sized by the screen height |
--story-stage-display | none | flex | mobile: visual inline per step |
--story-inline-display | block | none | |
--story-steps-pt | 0px | var(--spacing-3xl) | copy starts 64 below the chapter bar |
--story-step-scroll-margin | var(--chapter-scroll-margin) | calc(var(--chapter-nav-height) + var(--story-steps-pt)) | a chapter jump lands there too |
--story-action-bottom | var(--spacing-md) | var(--spacing-xl) | floating button on a visual |
--story-steps-pb | 0px | 40dvh | the last step can reach mid-screen |
--story-gap | var(--spacing-lg) | between all copy blocks (Figma) | |
--story-frame-gap | var(--spacing-3xl) | var(--spacing-edge) | extra break before a new visual |
--story-copy-max-width | none | 34em | |
--story-inactive-opacity | 1 | 0.25 | |
--story-px | calc(100cqw / 1040) | ||
--story-quote-width | 570 | ||
--story-quote-mark-width | 142 | ||
--story-quote-mark-gap | 20 | ||
--story-quote-mark-size | 160 | ||
--story-quote-mark-line-height | calc(129 / 160) | ||
--story-quote-text-size | 36 | ||
--story-quote-gap | 48 | ||
--story-quote-attribution-size | 22 | ||
--story-visual-top | 0px | visual fills the height under the chapter bar | |
--story-copy-min-width | 360px |