npx zenora-ui-registry@latest add spiral-gallery
Spiral Gallery
Gallery 295 views•80 uses
Get this component
Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.
npx zenora-ui-registry@latest add spiral-galleryWrites to components/zenora-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
Props
10 propertiesimagesstring[]10 imagesradiusnumber24pitchnumber45cardsPerTurnnumber9tiltnumber0curlnumber60blurnumber100backgroundcolor#fffffffontFamilystringvar(--font-instru…textScalenumber100