Yearly Metrics Ruler Timeline
Track-record stat block whose figures animate via NumberFlow along a primary-ticked ruler baseline.
Yearly Metrics Ruler Timeline
Track-record stat block whose figures animate via NumberFlow along a primary-ticked ruler baseline.
Installation
$npx shadcn@latest add @vandoko/vkb-stat-01Synthesis
Design synthesis (not a recolor): shadcnblocks structure + Mobbin form (SeatGeek / Better Stack / Kickstarter premium dark-editorial stats language) + Vandoko color & content (oklch tokens consumed via CSS vars, cyan as signal, brand-true copy).
Lineage
| Property | Value |
|---|---|
| Source | @shadcnblocks/stats22 |
| Version | 1.0.0 |
| Curated | 2026-05-27 |
| License | Commercial |
Sources
- shadcnblocks — Stats 22 - Yearly Metrics With Ruler Timeline (payload)
- Mobbin (page-coherent form spec): SeatGeek · Better Stack · Kickstarter
Modifications
- renamed Stats22 → VkbStat01; registry-alias imports + oklch semantic tokens only
- year selector feeds four big tabular figures that animate via NumberFlow above a --primary-ticked ruler baseline
- cyan reserved for the ruler tick and the active year pill; no bare oklch / chart literals
- SSR guard: figures hold final value until the section enters view (IntersectionObserver) then count up
Ported by shadcnblocks-pages-importer v1.2.0 → component-creator (landing-page16, two-front campaign).
Related Components
Selected Work Canvas Rail
Tab-filtered selected-work showcase that lays project node-cards along a connector rail; the focused project lifts and earns a cyan node marker.
Oversized Live Figures
A type-led proof-by-numbers band of oversized animated numerals that count up on scroll-into-view via NumberFlow, anchored by a single cyan signal figure.