Circular Gallery

Installation

pnpm dlx @glinui/cli@latest add circular-gallery

Prefer the package? npm install @glinui/ui @glinui/motion @glinui/tokens

Usage

Our own design (clean-room, no upstream code). Tiles sit on a ring seen from the front: the front tile is large and sharp, the others shrink, dim and blur toward the back.

Drag has inertia and eases to the nearest tile. Positions are computed in JS and written as CSS variables from a rAF loop, so a drag causes no React renders.

Compared with CylinderCarousel: the gallery is a continuous, draggable ring with a front caption and click to focus. The carousel is a step based slide show.

<CircularGallery variant="plain" items={items} tileWidth={110} tileHeight={140} />

<CircularGallery variant="plain" items={items} tileWidth={110} tileHeight={140} />

<CircularGallery autoRotate autoRotateInterval={2600} items={items} />

<CircularGallery autoRotate autoRotateInterval={2600} items={items} />

<section aria-labelledby="collections">
  <h3 id="collections">Browse collections</h3>
  <CircularGallery items={items} />

<section aria-labelledby="collections">
  <h3 id="collections">Browse collections</h3>
  <CircularGallery items={items} />
</section>

Accessibility

• A listbox with option tiles, a roving tabindex and aria-current on the front tile. Back tiles are still focusable and clicking or focusing one brings it forward.
• Arrow keys, Home and End move the front tile and focus together.
• Drag and wheel are conveniences only, every action has a key and click equivalent.
• Auto rotate pauses on hover, focus and drag and is off under reduced motion.

Reduced Motion

Easing and auto rotate only run at motion level full. Otherwise the ring snaps to the chosen tile instantly.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { CircularGallery } from "@glinui/ui"