shadcn.io is not affiliated with official shadcn/ui
Panorama Viewer Gallery Block for Ark UI
A drawn alpine valley seven times wider than tall in a framed scroll region you can drag or scroll with the arrow keys, with a minimap that follows the view, a zoom slider from 100% to 300% and a Reset button.
Installation
Overview
A panorama viewer for React with Ark UI, for Summitry, a summit-photo atlas. One drawn alpine valley, seven times wider than tall (two ranges with snow, a lake that mirrors them, forest on both banks and a hut), sits in a framed scroll region. Drag it with a mouse or pen, scroll it, or focus it and use the arrow keys. A ruled band under the frame holds a minimap, the whole picture small with a rectangle that follows the view (click or drag it to pan), a Zoom slider from 100% to 300%, minus and plus buttons (the only zoom control on a phone), the zoom's value and a Reset button. Zooming keeps the centre of the view where it was. Nothing moves by itself. The picture is drawn, not photographed. It's built from Slider, Button and Guides, with a native scroll region, and your theme's tokens for every colour. The valley and the atlas are made up for the example.
FAQ
How do I move around the picture?
Four ways. Drag it with a mouse or pen. Scroll it with a wheel, a trackpad or a touch swipe. Focus it (it has a tab stop and a visible focus ring) and use the arrow keys, Home and End. Or click or drag on the minimap, which puts that point at the centre of the view.
How does zoom work?
The picture's width and height are the window's height times the zoom, so at 100% the whole valley fits the window's height and at 300% it is three times larger both ways, with the region scrolling in both directions. The block remembers the point the view was centred on and puts it back after the picture resizes. The slider, the minus and plus buttons (twenty percent a press) and Reset all go through one handler, and a polite status line says "Zoom 140%".
What does the minimap show?
The same drawing, small, with a rectangle for the part you are looking at. The rectangle moves as you scroll and changes size as you zoom; its position is written straight to the element as CSS variables from the scroll position, so scrolling never re-renders the picture. The minimap is a pointer extra and is hidden from assistive technology: the scroll region and the zoom controls do everything it does.
How does the zoom slider work per library?
It is a labelled slider from 100 to 300 in steps of ten, with the value read out as "140%".
The Slider takes value={[level]} and getAriaValueText receives { value }.