Jewellery Curl Slider
A stacked deck fans into a row, cards curl as you drag, and each one flips to show the piece worn.
The Jewellery Curl Slider opens with the collection scattered across a near black screen as faint ghosts, which gather into a single stack and then fan apart into a row. From there 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. Click any card and it flips over to show the piece being worn. The name in large gold italics, the collection and the counter all change in step with the centred card.
How it works
The page opens on the whole collection stacked as one deck in the centre of the screen, which fans apart into a row before the interface appears. Each card is a WebGL surface with two faces: the product photograph on the front and the piece being worn on the back, and clicking a card flips it over with a real rotation. Dragging or scrolling slides the row, 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 each card settles flat as the slider snaps to the nearest piece. The piece name and collection crossfade in step with whichever card is centred. All sixteen photographs, eight products and eight worn shots, were generated in house as one matched set.
When to use it
Built here for a fine jewellery house on a near black ground, it suits any brand that sells few, precious things: jewellers, watchmakers, eyewear, ceramics, limited furniture. Six to ten pieces is the sweet spot, each needing two photographs, the piece itself and the piece being worn.
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.
What happens when a card is clicked?
It flips over with a real rotation to show the same piece being worn, and clicking again returns to the product. Front and back are two separate photographs on one card, so the flip reads as turning a physical object rather than swapping an image.
Where did the photos come from?
All sixteen were generated for this demo as one matched set, eight gold pieces and eight worn shots in the same warm studio style, which is exactly how we can produce a coherent catalogue for a brand that does not have one yet.