TITLE: Ink & Brush — characters drawn stroke by stroke
PROMPT: Build a single self-contained HTML page: a calligraphy practice sheet on a warm #f6f1e7 paper ground, with a fixed backdrop of a soft white centre glow, a warm edge vignette and a 4px laid-paper line texture. Centred column, max-width 920px: a ui-monospace 11px/.34em uppercase eyebrow "practice sheet · sheet 04" in #6b7280, a Georgia 700 headline "Ink & Brush" at clamp(28px,5.4vw,46px) with "Brush" in seal red #9c2b1f, and a 14.5px grey caption. Below, a 420px square practice sheet (aspect-ratio 1, 3px radius, 1px rgba(20,20,20,.16) border, soft drop shadow) containing, in order, an inline SVG 米字格 guide (dashed #c9c2b4 square, centre cross, both diagonals) and two stacked canvases: #ink (the pale tracing guide plus completed strokes, never cleared except on rebuild) and #live (the in-progress stroke and drying ink, cleared every frame). The character is drawn from hand-authored stroke data in a normalised 0–100 space: 一 (one stroke), 十 (2), 人 (2), 大 (3), each stroke a list of [x, y, pressure] control points. A Catmull-Rom sampler resamples each centreline to ~100 points; for every sample the tangent gives a normal, and the outline is built as a left/right offset polygon whose half-width is 4.6 × brushScale × pressure × a taper profile (blunt 52% entry over the first 7.5%, exit tapering to 30% over the last 10%). Ink bleed comes from three layered fills of the same outline at widths ×1.62 (alpha .13), ×1.30 (alpha .20) and ×1.00 (alpha .96), with a round tip circle at the moving end. The drawing runs on requestAnimationFrame with an easeInOut progress over 760–880ms per stroke and a 250ms brush-lift gap; a completed stroke is committed to the ink canvas while a wet copy stays on the live canvas and fades out over 900ms so the ink visibly dries; the seal presses when the last stroke lands. Stroke-order badges (numbered circles at each stroke's start point) sit at 28% opacity and brighten on sheet hover, popping to full as each stroke completes. Controls below: character chips (one/ten/person/big with stroke counts), a brush-size range slider (0.6–1.7×) that rebuilds the geometry live, and a REPLAY pill button; keys 1–4 switch character. A seal button at the sheet's bottom-right is a red rounded square with carved paper-coloured marks that re-runs a press animation. All CSS in one inline style block, all JS in one IIFE in one inline script at the end of body; system fonts only; no external resources; no createElementNS.
DESCRIPTION: A quiet, tactile calligraphy study: the paper is warm and slightly worn, the practice grid is printed underneath, and a pale tracing guide shows the whole character from the first frame so the sheet is never empty. The brush then writes over it — each stroke a real tapered polygon with a soft bleeding edge, the tip travelling, lifting between strokes, and the ink visibly settling from wet to dry before the red seal comes down. It reads less like an animation and more like a hand at work.
TECHNIQUES: canvas tapered strokes built as offset polygons with per-sample lineWidth equivalent; Catmull-Rom resampling of hand-authored [x,y,pressure] control points; pressure-driven width with entry/exit taper; ink bleed via three layered fills of the same outline at increasing width and decreasing alpha; two-canvas architecture (permanent ink layer + per-frame live layer) to avoid full redraws; wet-to-dry fade of completed strokes; rAF state machine with draw/gap/done phases; stroke-order badge overlays positioned in percentage space; inline SVG practice grid drawn beneath the canvases; DPR-aware canvas sizing with setTransform; prefers-reduced-motion drawing the finished character instantly.
INTERACTION: Click REPLAY to clear the sheet and redraw the character stroke by stroke. Hover the sheet to brighten the stroke-order numbers. Drag the brush slider to change stroke thickness live — the geometry rebuilds and the finished strokes re-render at the new weight. Click the seal to stamp it (or let it press itself at the end of the drawing). Press keys 1–4 or click a chip to switch between one, ten, person and big. The stroke pills under the sheet fill in as each stroke lands.