Coverflow 46 - Double Helix Cover Flow

Pro

Two strands of ceramics and homeware photos spiral half a turn apart around a vertical axis like a twisted ladder, climbing and turning on their own, with the far strand dimmed through the gaps and vertical drag or wheel scrubbing the twist.

Shadcn Coverflow 46 block

Component data

ID
coverflow46
Access
pro
Created
Nov 4, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Coverflow 46 block design & features

Coverflow46 is a double helix carousel built with motion and CSS 3D transforms, shown here with twelve photos from a homeware shop: cups, jugs, vases, a kettle and a few plants. There is no heading or caption, only the images on the page background, and the region is labelled for screen readers.

The photos are split across two strands that wind around the same vertical axis, half a turn apart, so they cross in front of and behind each other like the rails of a twisted ladder. Cards on the sides turn in toward the axis and lean toward the other strand, cards at the front are at full strength, and cards at the back stay facing the viewer but dim, so the far strand reads clearly through the gaps. The helix climbs and turns on its own; dragging vertically scrubs the twist with inertia, a wheel gesture or the arrow keys turn it a step, and it picks up again after a few seconds. Both strands loop endlessly, and on touch a sideways swipe scrubs it while vertical swipes still scroll the page.

It suits homeware, ceramics and craft brands that want a quiet, image-only collection section. Each item needs a photo and alt text; the two strands share the same set, offset by half.