`. - `.top` fixed: `.segs` (decorative) and `.bar` with the app mark, brand, ``, ``. - Six `

`, absolutely stacked; only `.on` is visible. Each: `.k` kicker, one display element (`.big` or `.huge`), one `.p` sentence, and one bottom visual. - Card 4 uses an `

`; card 6 has an `
` with a `

` of four stats and two `.btn`s. - Two transparent `

` overlays: `.prev` (left 30%) and `.next` (right 70%), both from `top:110px` so they never cover the top bar. Hidden on card 6 so its buttons work. Card fields and content: | # | Background | Text | Display | Visual | |---|---|---|---|---| | 1 | `#e8442e` tomato | `#1a0f0a` | "2026" | 12 spines, heights 46–100% | | 2 | `#0f5b3e` moss | `#d9f99d` lime | "14,382" | 12 monthly bars + "47 books · 312 hours · 9 languages" | | 3 | `#f5c518` sun | `#1b1400` | "41" | 7 × 8 calendar, squares 5–45 filled | | 4 | `#141210` night | `#f4ebdd` cream | — | top five list | | 5 | `#1d3fd8` cobalt | `#f4ebdd` | "NIGHT OWL" | 24h ring, arc 22:00–01:45 | | 6 | `#f4ebdd` cream | `#141210` | poster | Share to story, Watch again | ## Tokens ```css :root { /* card fields and their ink */ --tomato: #e8442e; --tomato-ink: #1a0f0a; --moss: #0f5b3e; --lime: #d9f99d; --sun: #f5c518; --sun-ink: #1b1400; --night: #141210; --cream: #f4ebdd; --cream-2: #b9afa0; /* secondary on night */ --cobalt: #1d3fd8; --rule: #3a342e; /* list hairline on night */ /* type */ --display: "Anton", Impact, sans-serif; --body: "Poiret One", Futura, sans-serif; --fs-kicker: 15px; /* Anton, +0.14em, uppercase */ --fs-big: min(39vw, 200px); /* "2026", "41" */ --fs-huge: min(30vw, 124px); /* "14,382", "NIGHT OWL" */ --fs-sentence: 22px; /* layout */ --pad: 24px; --content-top: 138px; --content-bottom: 58px; --seg-h: 3px; --seg-gap: 4px; --r: 20px; /* poster */ --btn-h: 52px; /* share buttons, radius 26 */ --icon: 40px; /* round top-bar buttons */ /* motion */ --dur: 5200ms; /* per card */ --t-fade: 360ms; --t-rise: 700ms; --stagger: 120ms; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease: cubic-bezier(.2, .7, .2, 1); } ``` ## Typography | Role | Family | Size | Weight | Line-height | Tracking | Case | |---|---|---:|---:|---:|---:|---| | Kicker | Anton | 15px | 400 | 1 | +0.14em | UPPERCASE | | Big number | Anton | min(39vw, 200px) | 400 | 0.82 | −0.01em | — | | Huge number / word | Anton | min(30vw, 124px) | 400 | 0.86 | −0.005em | tabular, caps | | Sentence | Poiret One | 22px | 400 | 1.28 | 0 | sentence, max 22ch | | List title | Poiret One | 23px | 400 | 1.15 | 0 | Title | | List author / stat label | Poiret One | 17–18px | 400 | 1.3 | 0 | sentence | | List number | Anton | 44px (64px for #1) | 400 | 1 | 0 | — | | Stat value | Anton | 44px | 400 | 1 | 0 | — | | Poster headline | Anton | 56px | 400 | 0.9 | 0 | UPPERCASE | | Button | Anton | 17px | 400 | 1 | +0.08em | UPPERCASE | | Brand | Poiret One | 18px / 15px | 400 | 1.1 | +0.02em | Title | Poiret One is never set below 15px; its hairline strokes vanish smaller. ## Motion | Element | Trigger | Property | From → To | Duration | Easing | Delay | Reduced motion | |---|---|---|---|---:|---|---|---| | `.seg.now i` | card shown | scaleX | 0 → 1 | 5200ms | linear (time) | — | no auto-advance; tap only | | `.card` | show / hide | opacity (+ visibility) | 0 ↔ 1 | 360ms | `--ease` | — | instant | | `.rise` | card shown | opacity, translateY | 0, 28px → 1, 0 | 700ms | `--ease-out` | 120ms + i × 120ms | shown, no move | | `.spines i` | card 1 | scaleY | 0 → 1 | 900ms | `--ease-out` | 400ms + i × 60ms | full height | | count-up | card 2 | text | 0 → 14,382 | 1400ms | quartic out | 240ms | final value | | `.months i` | card 2 | scaleY | 0 → 1 | 800ms | `--ease-out` | 500ms + i × 50ms | full height | | `.dots i.f` | card 3 | scale, opacity | .3, 0 → 1 | 380ms | `--ease-out` | 500ms + i × 18ms | shown | | ring `.arc` | card 5 | stroke-dashoffset | 1 → 0 | 1200ms | `--ease-out` | 600ms | drawn | | `.btn` | active | scale | 1 → .97 | 160ms | `--ease` | — | none | ## States - **Playing:** current segment filling; previous segments full; later segments show only the track shade. - **Paused (hold or button):** `.paused` on the story sets `animation-play-state: paused` on the current segment. The pause button reads "Resume story" while pressed. - **Last card:** segment full, no auto-advance, tap zones hidden so the buttons are reachable. - **Per-card chrome:** the top bar's text, segment track (`rgba` of the field's ink at 25–60%) and button tint (ink at 8–16%) change on every card. - **Focus-visible:** 2px outline in the current text colour, 3px offset, on every button. - **Button pressed:** scale .97. ## Accessibility - Each card is a `

` with `aria-label="Card N of 6"`; hidden cards get `aria-hidden="true"` and `visibility:hidden`, so only the current card is read. - Tap zones are real buttons labelled "Previous card" and "Next card"; ← / → work from anywhere. - The pause control is a toggle button with `aria-pressed`; it is the WCAG 2.2.2 escape hatch for auto-advancing content. - The progress segments, spines, bars, calendar and ring are decorative (`aria-hidden`); their facts are in the sentence beside them. - Contrast on every field: tomato ink 4.7:1, lime on moss 7.0:1, sun ink 11.2:1, cream on night 15.8:1, cream on cobalt 6.5:1, `--cream-2` on night 8.6:1. - Hit targets: icon buttons 40 × 40; share buttons 52px tall, full width. - Reduced motion: nothing auto-advances; every visual is shown complete. ## Responsive rules - 390 × 844: as specified. - 360 wide: display sizes follow the `vw` clamps ("2026" at 140px, "14,382" at 108px); the sentence keeps 22px and wraps to four lines. - Short phones (< 700px tall): drop `--content-top` to 120px and hide the card 2 stats row. - Tablet or desktop: centre a 390 × 844 story column on a `#141210` ground with 20px radius; tap zones stay inside the column. ## Acceptance checklist **Always** - [ ] Six segments at the top, 3px tall, 4px gaps; the current one fills linearly over 5200ms and advances on `animationend`. - [ ] Right 70% taps go forward, left 30% go back, ← / → mirror them. - [ ] Holding for 220ms pauses; the release does not advance. - [ ] A pause toggle and a replay control are always visible; the last card has a "Watch again" button. - [ ] Each card shows one display number or word and one sentence, no more. - [ ] Only the visible card is in the accessibility tree. - [ ] Every text colour passes 4.5:1 on its card field. - [ ] Reduced motion: no auto-advance, no rise, visuals complete. **This demo** - [ ] Card order: 2026 (tomato), 14,382 pages (moss), 41-day streak (sun), top five (night), NIGHT OWL (cobalt), share (cream). - [ ] The monthly bars sum to 14,382 and March (2,104) is the peak. - [ ] Calendar squares 5 to 45 of 56 are filled (Mar 3 to Apr 12). - [ ] The ring arc runs from 22:00 to 01:45 with 12AM at the top. - [ ] Top five: The Salt Orchard, A Field Guide to Leaving, Nine Small Fires, Winter Ferry, The Glass Cartographer. ## Implementation notes **Let CSS own the clock.** The segment's own animation is the timer; JS only listens for its end, so pausing is a single class: ```css .seg i { position:absolute; inset:0; background:currentColor; transform:scaleX(0); transform-origin:0 50%; } .seg.done i { transform:scaleX(1); } .seg.now i { animation: fill var(--dur) linear forwards; } .paused .seg.now i { animation-play-state: paused; } @keyframes fill { to { transform: scaleX(1); } } ``` ```js segs.addEventListener('animationend', () => { if (!story.classList.contains('paused')) show(idx + 1); }); // restart the same segment when replaying: kill, reflow, restore const i = segs.children[idx].firstChild; i.style.animation = 'none'; void i.offsetWidth; i.style.animation = ''; ``` **Hold without a phantom tap.** Swallow the click that follows a hold in the capture phase: ```js let hold = 0, held = false; story.addEventListener('pointerdown', (e) => { if (e.target.closest('.tap')) hold = setTimeout(() => { held = true; story.classList.add('paused'); }, 220); }); story.addEventListener('pointerup', () => { clearTimeout(hold); if (held) story.classList.remove('paused'); }); story.addEventListener('click', (e) => { if (held) { held = false; e.stopPropagation(); } }, true); ``` **Draw the clock arc as a path, not a dashed circle.** Compute both ends from the hour (θ = h / 24 × 360°, measured clockwise from the top) and animate `stroke-dashoffset` with `pathLength="1"`: 10pm is (12.05, 6.23) and 1:45am is (27.03, 5.74) on r = 15.9 around (20, 20). Common mistakes: letting display numbers overflow at 390 (clamp them with `vw`); tap zones covering the top bar, which makes pause and replay unreachable; leaving all six cards in the accessibility tree; animating `width` on the segments instead of `scaleX`. --- *From Design Lounge (https://www.designlounge.live). Live demo and source: /p/card-wrapped-story. Free to use in your products. Credit line: Designed using Design Lounge.*