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 propertiesimagesstring[]12 imagesradiusnumber24pitchnumber45cardsPerTurnnumber9tiltnumber0curlnumber60blurnumber100backgroundcolor#0b0b0bfontFamilystringvar(--font-instru…textScalenumber100Get 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-galleryWrites to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.
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
