Pixel Seam

Written for the variant you picked above: Mint

Build a section whose top and bottom edges are pixel seams. Props: eyebrow, title, lead, stats [{value, label, prefix, suffix, decimals}], primary and secondary links {label, href}, palette {above, below (the neighbouring sections' colours), ground, ink, muted, line, accent, onAccent}, cell (18px), rows (7), onNavigate and className. Seam (pure functions): row r of n is filled to a density of ((r + 0.5) / n)^1.2 — nearly empty at the outer edge, nearly solid next to the section; a square is filled where its 4 × 4 Bayer threshold, plus a little seeded jitter, is under that density, which gives the crafted ordered-dither look rather than noise. Each filled square gets a delay — rows nearest the section first (70ms per row) plus up to 260ms of seeded scatter. A count-up eases out cubically. Render each seam as an SVG as wide as the section (a ResizeObserver; squares 70% smaller below 640px): the top one on the colour above with squares in the section's colour; the bottom one on the section's colour with squares in the colour below — both thicken downwards, so the bottom seam dissolves into the next section. When the section scrolls into view (IntersectionObserver, once) the squares pop in from scale 0 with a little overshoot on their delays (the bottom seam 500ms later). Without scripting or with reduced motion they're simply there. Body (container queries): two columns — a monospace eyebrow with a square bullet, a heavy tight title, a muted lead and the actions (a square-cornered primary in the accent with a hard offset shadow that grows on hover, and an outlined secondary whose arrow nudges) on the left; on the right a definition list of figures in three columns divided by hairlines, each counting up over 1.4s after the seam forms, with the final value in visually hidden text for screen readers. One column below 820px. Selected variant — Mint (mint): A deep green section #0d3b2e between cream #f3f1ea sections: ink #effaf4, muted #a9cdbd, a mint accent #8ef0c4 with dark green text. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: The links work as normal; the seams and figures animate once when the section scrolls into view. Motion: Squares pop in over about 0.6s per seam with an overshoot; figures count up over 1.4s. Reduced motion shows everything finished. Accessibility: A labelled section with real links; the seams are decorative and hidden; figures are a definition list whose real values are in the text for screen readers while the visible ones count. Responsive behavior: Seams rebuild for any width with smaller squares on phones; the body stacks below 820px. Touch: Nothing depends on hover. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

The links work as normal; the seams and figures animate once when the section scrolls into view.

Motion

Squares pop in over about 0.6s per seam with an overshoot; figures count up over 1.4s. Reduced motion shows everything finished.

Accessibility

A labelled section with real links; the seams are decorative and hidden; figures are a definition list whose real values are in the text for screen readers while the visible ones count.

Responsive

Seams rebuild for any width with smaller squares on phones; the body stacks below 820px.

On touch

Nothing depends on hover.