shadcn.io is not affiliated with official shadcn/ui
Numerals Over Maps Gallery Block for React Aria
Six drawn route maps on shared hairlines, each with its distance laid over the foot in large figures on a solid, masked panel, and a Show control that rolls every figure between this year and all time.
Installation
Overview
Giant numerals over pictures for React with React Aria. A centred header with a "Show" control (This year, All time) sits over six drawn route maps on shared hairlines that run rail to rail: three across, two on a phone. Each map is a line trace (a loop, a coast path, a ridge circuit, an out-and-back, a figure of eight, a lollipop) with a start and an end mark, and its distance in large figures over its foot. The figures sit on a solid panel whose top edge a mask fades into the map, so they keep full contrast in any theme, and switching the control rolls every figure to the other total with the catalog Sliding Number. A polite line gives the combined distance. The maps are drawn in the theme's greys. It's built from Guides, Toggle Group and Sliding Number. For fitness, travel and any set of places where one number is the point.
FAQ
How do the figures stay readable over a map?
They never sit on the map itself. The figure is on a solid bg-background panel at the foot of the tile, and a mask fades only the panel's top edge into the picture. The text starts below the fade, so the pixels behind it are the panel's, in light and dark.
What happens when I switch the total?
Each figure keeps its place and rolls to the new value, digit by digit, with the catalog Sliding Number (the digits change in place under reduced motion). The words are always in the markup as plain text, so a screen reader reads "2,418", not a stack of digits. Nothing else changes and the page doesn't move.
Which keys work?
Are these real distances?
They are example figures: each route's two totals are typed in the data, and the polite line adds up whichever total is shown. Replace the route list with your own numbers and the line follows.
How do I use my own photographs?
The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the photograph's own so the layout doesn't change. The maps are the route scene; swap each tile's Scene for a static map image and keep the panel.