Coverflow 11 - Autoplay Cover Flow With Ring Timer

Pro

An autoplaying portrait cover flow that loops through projects, with a heading, clickable segmented pagination, a small ring timer that doubles as a pause button, and a live category and title caption.

Shadcn Coverflow 11 block

Component data

ID
coverflow11
Access
pro
Created
Oct 10, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Coverflow 11 block design & features

Coverflow11 is an autoplaying cover flow built with shadcn/ui. A heading with an eyebrow sits at the top left, and segmented pagination with a small circular timer sits at the top right. Below, a row of portrait project photos turns through a classic cover flow, and the current project's category and title are centered underneath.

The ring fills over each interval and moves the row to the next project when it completes, so the timer and the carousel always agree. Hovering the photos pauses the ring where it is, and clicking the ring pauses or resumes autoplay. The row loops endlessly, cards spring into place, and side cards are washed with the page background. The arrow keys and the pagination segments jump directly to a project.

The effect feels calm and editorial, a good way to present a short run of work without asking visitors to do anything. It needs a portrait image, title, and category for each project, and the interval is a prop. For visitors who prefer reduced motion, the timer is shown full and autoplay stays off.