Semantic zoom
ProAn infinite-zoom map of a company that reveals teams, projects, tasks and people as you fly in.
Studio map
5 teams, 21 projects and 151 tasks. Zoom in for more detail.
Use the arrow keys to move between items in view, Enter to zoom in or tick a checklist item, Escape to zoom out, plus and minus to zoom, and 0 to see the whole studio.
| Team | Project | Health | Progress | Open tasks | Blocked | Due |
|---|---|---|---|---|---|---|
| Platform | Billing v2 | At risk | 69% | 6 | 1 | Oct 15 |
| Platform | SSO for enterprise | On track | 63% | 4 | 0 | Oct 22 |
| Platform | Edge caching | On track | 84% | 2 | 0 | Oct 4 |
| Platform | Postgres 17 upgrade | On track | 76% | 2 | 0 | Sep 30 |
| Platform | Audit log export | Off track | 33% | 7 | 2 | Nov 2 |
| Platform | Rate limiting | On track | 42% | 3 | 0 | Oct 11 |
| Product design | Design system 3.0 | On track | 54% | 4 | 0 | Oct 19 |
| Product design | Onboarding redesign | At risk | 51% | 5 | 1 | Oct 8 |
| Product design | Mobile navigation | On track | 47% | 4 | 0 | Oct 26 |
| Product design | Accessibility audit | On track | 58% | 5 | 0 | Nov 5 |
| Growth | Pricing page test | On track | 94% | 2 | 0 | Oct 1 |
| Growth | Referral program | At risk | 43% | 6 | 1 | Oct 17 |
| Growth | Lifecycle emails | On track | 64% | 3 | 0 | Oct 6 |
| Growth | Trial conversion | On track | 53% | 4 | 0 | Oct 30 |
| Mobile | Offline mode | At risk | 43% | 6 | 1 | Oct 23 |
| Mobile | iOS widgets | On track | 84% | 2 | 0 | Oct 3 |
| Mobile | Android performance | On track | 70% | 3 | 0 | Oct 12 |
| Mobile | Notification settings | Off track | 36% | 5 | 2 | Sep 28 |
| Data and insights | Usage analytics | On track | 65% | 4 | 0 | Oct 10 |
| Data and insights | Revenue dashboard | On track | 60% | 2 | 0 | Oct 2 |
| Data and insights | Churn model | At risk | 40% | 6 | 1 | Oct 28 |
- Workspace or portfolio overviews where people zoom from the whole company to one task.
- Hierarchical data where each zoom level should show different detail.
- Use tree-view for a plain hierarchy people scan and expand.
- Use project-board for working on tasks.
- Use customer-galaxy for flat data clustered by attributes.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this on a workspace or portfolio overview so people can move from the whole company to a single task without losing their place. Replace the seeded teams in zoom-data.ts with your own; layout, rollups and labels derive from it.
import { SemanticZoom } from "@/components/arc/blocks/semantic-zoom/semantic-zoom"; export default function WorkspaceMap() { return ( <section> <SemanticZoom /> </section> );}SemanticZoom
An infinite zoom canvas map of a company that reveals teams, projects, tasks and people as you fly in, with breadcrumbs, a minimap and a guided tour. Takes no props; teams, projects, tasks and people are sample data in zoom-data.ts.
No props.
- Arrow keys
- Moves the cursor between nearby items.
- EnterorSpace
- Flies into the item under the cursor.
- EscapeorBackspace
- Flies out one level.
- +or-
- Zooms in or out.
- 0orHome
- Fits the whole company.
- The stage is role="application" with a zoomable map roledescription, a text summary label and a keyboard hint.
- Breadcrumbs are a nav with aria-current="location" on the current level.
- The tour toggle uses aria-pressed, the side panel is labelled, and a polite live region announces moves.
- The camera flies between levels on eased zooms, and detail fades in as each level gets large enough.
- Breadcrumbs, panel stats and people avatars enter with a blur rise or spring.
- Reduced motion is passed to the engine for instant camera moves, and UI transitions become instant.
- From a 900px container the side panel sits beside the stage at 268px; below that it moves underneath, and below 600px the stage is 480px tall.
- Touch uses pinch to zoom and tap to fly in; the stage allows vertical page scroll until zoomed in.
- The mouse wheel always zooms over the stage, so leave page space around it for scrolling.
- Draws on 2D canvases sized by ResizeObserver with devicePixelRatio capped at 2.
- The loop pauses offscreen via IntersectionObserver and in hidden tabs.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use on a workspace or portfolio overview so people can move from the whole company to a single task.
- Replace TEAMS, PROJECTS, TASKS and PEOPLE in zoom-data.ts; layout, rollups and labels derive from them.
The full library index for assistants is at /llms.txt.