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.
