Coverflow 9 block design & features
Coverflow9 is an autoplaying helix built with shadcn/ui. On the left sit an eyebrow, a large heading, a short description, a big mono frame counter with the current title, and a segmented progress line with one segment per image. On the right, ten portrait photographs of colorful towers are wound around a vertical axis like a spiral staircase, each one a step higher and a little further round than the last.
The spiral turns on its own. It holds each tower at the front for a moment, then eases round and down to the next, looping endlessly with images joining and leaving at the ends of the visible run. Images that are not at the front are washed with the page background and fade out toward the ends. Hovering the spiral holds it still, and it stops for visitors who prefer reduced motion.
It is an elaborate and experimental block with a gallery-installation feel, built entirely with CSS 3D transforms driven by a single animation loop. The helix radius is derived from the card width, so neighbouring images never cut through each other. It works best with a run of portrait images in a consistent style, and the timing per image is a prop.
On mobile the copy stacks above the spiral, which shrinks to fit.