Huashu Sparkline Arc

Narrative Sparkline · 叙事波形

Produce a single-file, Duarte-style narrative deck. You are a story cartographer working in HTML: every page is built on one oscillating waveform that travels between "what is" and "what could be", and orange appears only where the story turns. The visual system, canvas contract, and navigation runtime are locked by example.html. Start from example.html, replace content only — do not rewrite the design or the script. Do not introduce any color or font outside this spec.

Generated from the Sparkline叙事波形 / Narrative Sparkline (Duarte式) spec (中性派, 还原91%) in references/design-styles.md of huashu-design by 花叔 (alchaincyf), MIT licensed. Lineage: Nancy Duarte《Resonate》sparkline structure, Al Gore An Inconvenient Truth, Duarte Inc. data storytelling.

Hard spec (locked — violating any line is a regression)

Canvas & runtime

• One `` fixed at 1920 × 1080 px, centered with

position: fixed; top: 50%; left: 50%; a fit() function applies translate(-50%, -50%) scale(min(innerWidth/1920, innerHeight/1080)) on load and resize. All inner layout in px — the scaler owns responsiveness.

• Each page is one ` inside #stage` with a

data-screen-label="01 封面"-style label; exactly one slide carries .active; dark pages add .dark.

• Navigation (keep the script verbatim): ←/↑/PageUp previous,

→/↓/Space/PageDown next, Home/End first/last; #/N hash routing (1-indexed) read on load + hashchange, written via history.replaceState; click left third = back, rest = forward; fixed counter pill bottom-right, key-hint bottom-left. No external JS, no build step — the file must open inside a sandboxed iframe via file://.

Design tokens (:root — keep the names, re-theme values only)

| Token | Value | Role | |---|---|---| | --paper | #FFFFFF | light page background | | --night | #0E0E0C | dark pages (solo-line, closing) | | --ink | #1A1814 | primary text on light | | --night-ink | #F5F3EE | primary text on dark | | --accent | #FF6B2C | the brand orange — the only accent | | --accent-dim | rgba(255,107,44,.14) | annotation halos / soft fills | | --ghost | #C9C7C2 | greyed comparison waveform | | --grid | #ECEAE6 | hairline rules | | --muted | #9A958C | secondary labels | | --muted-2 | #5F5A52 | body copy on light | | --night-line | #26241F | hairlines on dark pages | | --night-mut | #8A857C | secondary text on dark | | --sans | 'Inter', 'PingFang SC', …, sans-serif | headlines + body | | --mono | 'Geist Mono', 'SFMono-Regular', 'Menlo', monospace | labels, annotations, numerals |

Fonts: one Google Fonts @import (Inter 400–900 + Geist Mono 400–600) and nothing else. No CDN scripts, no chart libraries, no images — every chart is a hand-written inline SVG path. A second accent color is the cardinal sin of this style; grey is the only other voice.

Signature devices (the visual DNA — every deck must show them)

1. The waveform spine: every page carries at least one full-bleed

.spark SVG with a smooth cubic-bézier oscillating path. Line layer uses preserveAspectRatio="none" so the path stretches; annotation dots/text live in a second, non-stretched SVG layer with the same viewBox so circles stay round and type stays true. Line weights: .arc 5px orange hero line, .arc-thin 3.5px, .ghost-line 3px grey, .ghost-dash stroke-dasharray: 2 10 grey baseline/industry reference.

1. Orange turning-point annotations: .pt group = soft halo circle

(--accent-dim), solid orange dot (r≈6–7), optional 2px orange ring for THE inflection point, plus Geist Mono uppercase .lab (12px, 2px tracking) and .val (20px, 600) value text. Grey .pt-ghost dots mark pain points on comparison lines. Orange marks turning points only — if every dot is orange, nothing turns.

1. Progressive reveal: paths carry pathLength="1" + class draw

(stroke-dasharray: 1; stroke-dashoffset: 1); .slide.active .draw animates stroke-dashoffset to 0 (spark-draw, ~1.8s, ease-out-ish cubic-bezier). Segment stagger via d1/d2/d3, dot fade-ins via p1…p5 (animation-delay ladder). Because .active toggles display, the reveal replays every time a slide is entered — keep it that way.

1. Mono hairline chrome: 56px .chrome-top / .chrome-bottom strips on

every page — Geist Mono 11px uppercase, 2px tracking, --grid hairline border (--night-line on dark), org name left with an orange / separator, orange uppercase tag right, orange P.NN page marker bottom right. No solid bars, no logos — type and one hairline only.

1. Greyed contrast: every claim gets a comparison — dashed industry

baseline, the old process line above the new one, or a flat ghost line under the rising arc. The grey line is the "what is"; the orange line is the "what could be".

1. Mono numerals: giant numbers (.giant, 160–220px Geist Mono 600,

negative tracking, font-variant-numeric: tabular-nums) with one orange glyph (%, ×, unit); stat strips (.stat-strip) with a --grid top hairline, 44px mono numbers and 11px uppercase captions.

Layout enumeration (use 6+ per deck, never one layout everywhere)

| Layout | Role | |---|---| | cover | giant statement headline (orange full stop) + waveform below with what-is / turn / new-bliss dots | | contents | chapters hung directly on the waveform as numbered annotation points | | what-is | left action-title column + low, flat grey waveform with dashed industry ghost + stat strip | | turning-point | giant mono numeral + V-shaped inflection waveform, THE ringed orange dot, dated annotation | | before-after | stacked contrast: grey jagged line top half, orange rising line bottom half, hairline divider | | solo-line | dark page, one orange line crossing the void, one annotation, one big number | | evidence | rising waveform with 4 labelled value dots + summary strip of mini inline-SVG sparklines | | roadmap | three waveform segments revealed in sequence (d1/d2/d3) + three phase columns below | | quote | orange SVG quote marks + 56px/800 quote with orange key phrase + ghost waveline footer | | closing | dark page, 6px orange curve climbing out of the top-right edge + giant CTA |

Typography & narrative discipline

• Headlines: Inter 800–900, 54–108px, tracking −1.5 to −4px; the closing

glyph (。 or .) of a hero headline is orange — never the whole headline.

• Body: 19px / 1.8 --muted-2, emphasized spans --ink 700, max-width

~620px. Labels/annotations/numerals: always Geist Mono, uppercase, 2–4px tracking. Chinese copy uses 「」 quotes and full-width punctuation.

• Default 10 pages (8–11 allowed). White pages dominate; **at most 2–3 dark

pages** (solo-line + closing). Orange budget: turning points, annotation dots, chrome tags and single glyphs — roughly ≤ 5 orange touches per page.

• The deck must read as a Duarte sparkline: establish "what is" low, mark

one explicit dated turning point, oscillate through evidence, end with the line climbing out of frame ("new bliss"). One story, one line.

• No emoji, no gradients, no shadows, no images, no chart libraries. Real

content only — the user's actual numbers and dates; missing data gets an honest `` placeholder, never invented statistics. (The seed deck's 「澈流 / CHELIU」 data is fictional demo content and must be fully replaced.)

Workflow

1. Clarify once: topic, audience, page count — and the story spine:

what is the "what is", what is THE dated turning point, which 3–4 numbers prove the climb. This style dies without a real inflection moment.

1. Copy example.html, retitle, then replace each section's content

following the layout enumeration. Keep chrome strips, spark/reveal CSS, token names, and the script intact. Reshape the bézier paths to match the user's actual data direction (down-then-up, stepped, etc.) but keep the two-layer SVG pattern and pathLength="1" reveal mechanics.

1. For ≥ 5 pages, showcase first: build the cover + the turning-point

page, confirm the grammar, then batch the rest.

1. Self-check before delivery: arrow through every page; counter and

#/N hash stay in sync; reveal animation replays on each entry; no overflow beyond 1920×1080; annotation dots sit visually on their lines at 16:9; orange appears only at turning points; every page has the chrome strips and at least one waveform; no leftover demo (「澈流」/"CHELIU") text; grep for TODO.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: nexu-io
• Source: nexu-io/open-design
• License: Apache-2.0
• Homepage: https://open-design.ai

Install and usage instructions live in the source repository linked above.