shadcn.io is not affiliated with official shadcn/ui
Split Map Canvas Hero Block for React
A split hero beside a wide map canvas that runs flush to the end rail: eight pulsing office pins and routes between them, with a closing band of three stats.
Installation
Overview
A split-layout hero with a map beside the copy, between solid rails. At the start sit an announcement pill, a headline, a sentence and two calls to action: a Shine Button and an outline button. A divider, with a + mark where it meets the top rule, separates them from the map, which fills its cell right up to the end rail. On a grid that fades toward its edges, eight office pins, from San Francisco to Sydney, pop in one after the other, each with its city's name and a ring that pulses gently out of its dot; dashed routes arc between them. A closing band under both halves holds three stats between hairlines, with + marks where it meets the rails. Pins, routes and rings are in foreground tones, so the Shine Button is the only primary control. The grid is our Grid Pattern and the pins our Status Pulse Text. For infrastructure and edge providers, distributed teams, companies with offices around the world and any product that sells global reach.
FAQ
How do I change the cities and the routes?
Edit OFFICES at the top of the file. Each office has a name, an x and a y in percent of the map's width and height, measured from its top-left corner, and a labelSide: end puts the name after the pin, start before it, which suits pins near the map's far edge so their names don't run off it. ROUTES lists the arcs as pairs of places in OFFICES ([0, 1] joins the first two), and each arc bows a little above the higher of its two pins.
How do I keep the stats and the map in step?
The band is STATS, a value and a label each, and the values are plain text, so nothing counts up. The block ships with eight offices on the map and "8" in the band, and a sentence that names five continents, which the eight cities span; when you change one, check the others. Values with a sign or a suffix, such as "40+", are isolated so they read the right way round in right-to-left layouts.
Can I use a real map?
Yes. Put an SVG world map behind the pins, inside the map's box, with its viewBox stretched the same way (preserveAspectRatio="none"), and place each pin by converting its longitude and latitude to percent of the map's width and height. Keep the map decorative, hidden from screen readers, and keep naming the places in the map's label.
How does a screen reader read the map?
The map is one image whose name lists the offices: "Map of our offices: San Francisco, New York, São Paulo, London, Dubai, Singapore, Tokyo, Sydney". The name is built from OFFICES, so it stays true when you edit them. The pins, the routes and the grid inside it aren't read one by one. The stats are a description list, each value read with its label, and the headline is the block's one h1.
Does the map flip in right-to-left languages?
No, on purpose. The copy, the calls to action and the stats follow the page's direction, but the map is set left to right, so San Francisco stays in the west and Tokyo in the east whatever the language. The map itself moves to the other side of the hero, as any split layout does.
What moves, and can I turn it off?
The copy fades and rises in, the map fades in, the pins pop in one after the other, the routes fade in after them, and each pin's ring keeps pulsing, on its own rhythm so they never pulse in step. It's all CSS, with no animation library. With reduced motion on, everything appears in place and the rings are gone, leaving the dots. On a phone the map sits under the copy, shorter, so the Shine Button stays on the first screen.
Related
- Pro
Reverse Split Dot Grid Map Hero
Diagrams and mapsA reverse split contact hero on solid rails: an abstract dot map with a pulsing marker per office fills the first half up to a divider, beside a headline, a Shine Button and three offices as ruled rows.
- Pro
Split Integration Flow Hero
Diagrams and mapsA split hero for a metrics pipeline: the headline and a Shine Button beside a divider and a flow diagram in a hairline frame, with a closing band of three proof cells.
- Pro
Hero With Stats
Stats and live dataA split hero with a headline, a Shine Button and a second action beside a rail of four key figures on shared hairlines, each with its period and a small bar trend.
- Pro
Split Image Editor Hero
Product windowsA split hero for a browser photo editor: the headline, three checks and a Shine Button beside a divider and a wide editor window that runs off the end rail, with a photo being cropped, adjustments and layers.
- Pro
Split Architecture Diagram Hero
Diagrams and mapsA reverse split hero for an infrastructure platform: a service topology on a tinted canvas flush with the start rail, six icon nodes, a travelling request and an inspector, beside a headline, a Shine Button and three ticks.
- Pro
Counter Stats Hero
Stats and live dataA compact, start-aligned hero for an email API on solid rails: a headline, a Shine Button and an outline button, then four counters in separate cells whose hairlines overshoot their corners.