Semantic zoomPro
An 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { SemanticZoom } from 'animui/semantic-zoom';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
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 "animui/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.