Jewellery Curl Slider
Product cards that curl like paper as you drag through the collection.
The Jewellery Curl Slider presents a collection one piece at a time on tall white cards, and the drag is the delight: pull the strip and every card curls like paper caught in the motion, then lies flat the instant it settles. The piece's name in large gold italics, the collection and the counter all change in step with the centred card.
How it works
Each product photograph is a WebGL surface in a horizontal strip. Dragging or scrolling moves the strip, and the speed of the movement bends every card, the middle lags behind the edges the way a sheet of paper curls when it is pulled through air, then the card settles perfectly flat as the slider snaps to the nearest product. The product name, collection and counter crossfade in step with whichever card is centred. The photography for this demo was generated in house, one white and gold study per piece.
When to use it
Built here for a fine jewellery house in white and gold, it suits any brand that sells few, precious things: jewellers, watchmakers, eyewear, ceramics, limited furniture. Five to nine products is the sweet spot, each with one clean photograph on a consistent background.
Why it works
Physical behaviour makes digital products feel handled. The paper curl turns a swipe into something closer to leafing through a lookbook, which suits objects that are bought slowly and considered carefully. And because each card fills the screen alone, every piece gets the undivided attention a catalogue grid can never give.
Recommended for
- Fine jewellery and watches
- Eyewear and accessories
- Ceramics and objects
- Considered product collections
Common questions
What makes the cards bend while sliding?
The slider's velocity is passed into a shader on each card, which pushes the middle of the surface back relative to its edges. Fast drags curl the cards hard, slow drags barely ripple them, and at rest they are perfectly flat.
Does the slider stop between products?
No. When the drag ends the strip glides to the nearest product and settles centred, so the page is never left showing half of one card and half of another.
Where did the product photos come from?
They were generated for this demo as a matched set, five gold pieces photographed in the same white studio style, which is exactly how we can produce a coherent catalogue for a brand that does not have one yet.