ns-ui

Gallery Coverflow Caustic

3D coverflow gallery whose frosted-glass cards run a live caustic-light simulation — drifting light pools refract across each pane, and drag velocity fringes the focused card's edges with chromatic aberration that settles to zero at rest.

Use when a browsable gallery where several items stay visible at once in 3D and the drag velocity itself should be legible as chromatic fringing that settles to zero at rest; pick carousel-card-riffle instead when only the top card should be visible and the edge stripe doubles as the pagination readout, or gallery-gantry-track when the gallery is driven by scroll rather than drag.

Install

npx shadcn add https://design.helpmarq.com/r/gallery-coverflow-caustic.json
  • gallery
  • coverflow
  • 3d
  • canvas
  • caustics
  • glass
  • chromatic-aberration
  • drag
  • momentum
  • ambient
  • showpiece

ns-ui / gallery-coverflow-caustic

GLASSHOUSE ARCHIVE

Field notes

Seven observations from the winter tank series — light pools drift across each frosted pane while the archive is at rest.

ARCHIVE / 07

Meltwater channel, dawn

JAN 07 2026 · 01

Condensation study

JAN 19 2026 · 02

Caustic net, tank 4

FEB 02 2026 · 03

Refraction drift

FEB 21 2026 · 04

Surface tension map

MAR 05 2026 · 05

Foam decay series

MAR 18 2026 · 06

Light pool census

APR 02 2026 · 07

drag to scrub, flick for momentum — velocity fringes the focused card's edges red/blue and settles at rest; wheel steps one card, arrow keys work when the stage is focused

Props

PropTypeDefaultDescription
items?CausticCoverflowItem[]DEFAULT_ITEMS—
initialIndex?number—starting focused card; defaults to the middle
cardWidth?number264card width in px (shrinks responsively on narrow containers)
cardHeight?number330—
className?string——
aria-label?string"Coverflow gallery"—
Back to the catalog