Semantic zoomPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/semantic-zoom

• Markdown: https://ui.xzero.co.uk/components/blocks/semantic-zoom/markdown

• Access: Xzero Pro

• Registry id: semantic-zoom

• Source file: registry/blocks/semantic-zoom/semantic-zoom.tsx

• Keywords: react semantic zoom, infinite zoom canvas, zoomable org chart, zoom ui, portfolio map, canvas zoom and pan

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.

When to use

• Workspace or portfolio overviews where people zoom from the whole company to one task.
• Hierarchical data where each zoom level should show different detail.

When not to use

• 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

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/semantic-zoom

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { SemanticZoom } from "@/components/xzero/blocks/semantic-zoom/semantic-zoom";

export default function WorkspaceMap() {
  return (
    <section>
      <SemanticZoom />
    </section>
  );
}

API reference

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.

Keyboard interactions

Keys	Action
Arrow keys	Moves the cursor between nearby items.
Enter / Space	Flies into the item under the cursor.
Escape / Backspace	Flies out one level.
+ / -	Zooms in or out.
0 / Home	Fits the whole company.

Accessibility

• 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.

Motion

• 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.

Responsive behavior

• 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.

Performance

• 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

• 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.

Related

• Customer galaxy: 2,400 accounts as a drifting galaxy that spirals into clusters by plan, region or health.
• Tree view: Navigate nested folders and structured content.
• Breadcrumb: Show where a page sits in a hierarchy.
• Layout morph: A 24 card gallery that flies between grid, masonry, list, fan, carousel and a 3D helix.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt