Spiral Gallery

Customize

Card Images12 images
Radius
24
Rise
45
Cards per Turn
9
Tilt
0
Speed Curl
60
Focus Blur
100
Background
Font
Text Scale
100%

Spiral Gallery

Gallery
295 views•80 uses

Props

10 properties
imagesstring[]12 images
Images placed along the spiral, repeated if there are fewer than twelve.
radiusnumber24
Width of the helix.
pitchnumber45
How far each card climbs above the last.
cardsPerTurnnumber9
Cards in one full revolution.
tiltnumber0
Lean of the spiral's axis.
curlnumber60
How much card corners lift while scrolling.
blurnumber100
How soft cards away from the centre become.
backgroundcolor#0b0b0b
Backdrop colour.
fontFamilystringvar(--font-instru…
Typeface for the caption.
textScalenumber100
Relative size of all text.

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add spiral-gallery

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

Image cards wound around a tilted 3D helix that scrolls endlessly on wheel or drag, bending to the spiral and curling at the corners with speed.

KEY FEATURES

  • ·Each card is a subdivided WebGL plane wrapped around the helix's cylinder in the vertex shader, so it hugs the curve instead of sitting flat
  • ·Cards away from the centre are blurred in the fragment shader with a golden-angle tap disc, coming into focus as they reach the middle
  • ·Scroll velocity feeds a curl uniform that lifts the card corners, easing flat again as the spiral settles
  • ·Cards wrap modulo the count, so the spiral loops forever in both directions
  • ·The caption pill follows the hovered card, falling back to whichever card faces the viewer; clicking a card glides it to the front