shadcn.io is not affiliated with official shadcn/ui
Numerals Over Maps Gallery Block for React
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 Base UI. 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.
Related
- Pro
Paginated Minimal Grid Gallery
Hairline gridsA quiet grid of twenty-four drawn concrete-architecture plates, eight to a page on shared hairlines, with a title and year that appear on hover and focus and the catalog pagination in a band that ends the block.
- Pro
Ratio Switcher Gallery
Hairline gridsSix drawn pictures in cells of their own, with a Ratio control (1:1, 4:3, 16:9, 3:2, 9:16, 21:9) that crops every picture to it while keeping each subject in frame, and a chip on every picture naming the ratio.
- Pro
Hover Card EXIF Gallery
Hairline gridsSix drawn frames in cells of their own, each a link with a hover card of camera, lens, aperture, shutter speed and ISO that opens on hover and on keyboard focus, and prints the same settings in the caption on a touch screen.
- Pro
Hover Caption Masonry Gallery
Masonry and mosaicA masonry wall of nine drawn interiors in three columns, each in its own framed cell, with a caption and a Save toggle that rise on hover and on focus and a live count of saved pictures.
- Pro
Re-lead Mosaic Gallery
Masonry and mosaicA dense mosaic of nine drawn quilt patterns on shared hairlines, eight squares and one lead two cells wide and two tall, with a Lead control that moves the big square while the rest reflow.
- Pro
Donut Pill Legend Stats
Parts of a wholeA traffic-source donut over a row of pill toggles: switch a source off and its arc leaves the ring, the others grow to fill it, and the shares and the total in the middle are worked out again.