Summit Stats

Written for the variant you picked above: Paper

Build progress towards a goal as a mountain climb. Props: title, value, goal, checkpoints [{at, label, date}], format, note, seed, theme and className. Ridge (pure functions): a seeded ridge of points from the base (0, 0) to the summit (1, 1): an eased rise (x^1.35) with four Gaussian bumps and dips for false summits, clamped below the summit until the last point; the ridge's height at any x by interpolation; progress as value / goal clamped to 0–1; and the part of the ridge up to a given x. Header: the title small and muted, the value large and tabular, "of £250k" and a percentage chip in the accent, and a note line. Scene (SVG, 270px tall, width from a ResizeObserver with inline-size containment so the drawing never widens the card): a paler far range behind, the mountain filled with a vertical rock gradient and continuing off to the right, a snow cap clipped above a jagged snow line, a dashed trail along the whole ridge and the walked part solid in the accent up to the current value. Each checkpoint is a small flag planted on the ridge at its own progress — filled in the accent once passed, outlined otherwise — and the summit has a dark flag marked "Goal". A climber (a dot with a soft halo) rides the walked path with CSS offset-path; when the section scrolls into view (or at once if it's already on screen) the walked line draws in and the climber walks up to today over 1.7s. Without offset-path support or with reduced motion, a still dot marks today. Each flag has an invisible button over it (labelled with the milestone, amount and date) that shows a dark tooltip — amount, label, date — on hover or focus. Two themes, paper (warm stone and sand) and night (slate and moonlit snow). Selected variant — Paper (paper): Palette for this theme (Paper): --sm-accent #d4572a; --sm-bg #f6efe4; --sm-far #d9cbb4; --sm-flag #23211d; --sm-ink #23211d; --sm-line rgba(35, 33, 29, 0.12); --sm-muted #615b51; --sm-rock-foot #c2b29a; --sm-rock-top #8a7a66; --sm-snow #fbf8f2; --sm-tip #23211d; --sm-tip-ink #f6efe4; --sm-trail rgba(35, 33, 29, 0.35). Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "paper". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. 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: Point at or tab to a flag to read that milestone. Motion: The trail draws in and the climber walks up over 1.7s on scroll-in. Reduced motion shows the climb finished. Accessibility: The scene is an image with a summary of the progress and milestones; each flag is a labelled button with a tooltip, so milestones are reachable by keyboard. Responsive behavior: The mountain is redrawn for any width; the header wraps. Touch: Tap a flag to read it. 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

Point at or tab to a flag to read that milestone.

Motion

The trail draws in and the climber walks up over 1.7s on scroll-in. Reduced motion shows the climb finished.

Accessibility

The scene is an image with a summary of the progress and milestones; each flag is a labelled button with a tooltip, so milestones are reachable by keyboard.

Responsive

The mountain is redrawn for any width; the header wraps.

On touch

Tap a flag to read it.