Atlas Plate

A field-guide style scroll walkthrough — a full-bleed plate is pinned on one side and numbered notes run down the other; scrolling to a note pans and zooms the camera to its hotspot and lights up the numbered leader line.

Loading preview…

npx shadcn@latest add "https://webberui.com/r/atlas-plate.json?t=<install token>"

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Zoom factorzoom

2.2

Frame aspect ratioaspectRatio

Pin spacingoffsetTop

<AtlasPlate />

Installation

npx shadcn@latest add "https://webberui.com/r/atlas-plate.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/atlas-plate.

Usage

AtlasPlate takes one figure (an <img>, an SVG, or any node) as the full-bleed plate, and a set of AtlasEntry children as the numbered notes. Each note declares its own hotspot on the plate with x / y (percentages from 0–100); scrolling to that note pans and zooms the camera to that hotspot and lights up the matching numbered leader line at the same time.

import { AtlasPlate, AtlasEntry } from "@/components/ui/atlas-plate";

<AtlasPlate figure={<img src="/plate.jpg" alt="" className="h-full w-full object-cover" />}>
  <AtlasEntry x={50} y={14} dir="up" title="Corolla">
    A whorled structure formed by six radiating petals.
  </AtlasEntry>
  <AtlasEntry x={26} y={42} dir="left" title="Leaf" zoom={2.6}>
    Simple alternate leaves, with veins branching pinnately from the base.
  </AtlasEntry>
  <AtlasEntry x={50} y={90} dir="down" title="Root system">
    The taproot extends downward and branches into fibrous roots.
  </AtlasEntry>
</AtlasPlate>

If the plate and the notes sit inside a nested scroll container (overflow-y-auto) on the page, pass that container's ref to container so the camera's focus detection and pinned positioning use it as their basis.

Props

AtlasPlate

Prop	Type	Default	Description
`figure`	`React.ReactNode`	Default placeholder image	The full-bleed plate visual, panned and zoomed by the camera
`children`	`React.ReactNode`	—	A set of `AtlasEntry`s, in the order they are numbered
`zoom`	`number`	`2.2`	Default zoom factor when focusing a hotspot
`aspectRatio`	`number`	`1`	Aspect ratio of the plate frame (width / height)
`offsetTop`	`number`	`16`	Distance from the top of the container while the plate is pinned (px)
`container`	`RefObject<HTMLElement \| null>`	Window	Ref of the nested scroll container
`plateLabel`	`string`	`"Atlas plate"`	Accessible label for the plate frame
`listLabel`	`string`	`"Atlas note list"`	Accessible label for the note list
`className`	`string`	—	Applied to the outermost grid
`figureClassName`	`string`	—	Applied to the plate frame
`listClassName`	`string`	—	Applied to the note list `<ol>`

AtlasEntry

Prop	Type	Default	Description
`x`	`number`	—	Horizontal position of the hotspot (0–100, a percentage)
`y`	`number`	—	Vertical position of the hotspot (0–100, a percentage)
`title`	`React.ReactNode`	—	Note title, also shown as the focus caption on the plate frame
`zoom`	`number`	Inherited from `AtlasPlate`	Overrides the zoom factor when this entry is focused
`dir`	`"auto" \| "up" \| "down" \| "left" \| "right"`	`"auto"`	Direction the numbered leader line points; `auto` points outward toward the page edge by quadrant
`id`	`string`	—	Anchor id for the note row
`children`	`React.ReactNode`	—	Note body copy

How it works

The camera work is a pragmatic implementation in CSS transforms (translate + scale), panning and zooming the focused hotspot to the center of the plate frame with no WebGL involved.
Hotspot markers on the plate are counter-scaled (1 / scale), so the dots, leader lines, and number badges keep a fixed on-screen size no matter how far the camera zooms in.
Focus comes from an IntersectionObserver reading each note row's visible ratio, with the highest one being the current focus; the plate frame is pinned with sticky while the long list scrolls beside it.

Accessibility

When the user has "reduce motion" enabled at the system level, the two-column layout and the focus highlight are kept, and only the camera's pan-and-zoom and transition animations are disabled.
Each note's number is a native button that can be focused with the keyboard and activated with Enter to scroll that note into the focus position; the focused note is marked with aria-current.
The decorative markers on the plate are hidden from assistive technology (aria-hidden), and the numbering and content information is carried by the note list.

On this page