3D Coverflow

3D Coverflow
3D Coverflow

About 3D Coverflow

3D Coverflow is a true cylindrical carousel: your slides ride the surface of a turning cylinder, each one tangent to the ring and facing outward, so the left card turns left and the right card turns right — like cards on the outside of a spinning wheel, not flat images sliding past.

NAVIGATION

- Press and drag to spin the ring freely either way, following your pointer

- Flick and release to keep spinning with momentum, easing to a stop and snapping to the nearest slide

- Arrows, dots and arrow keys all glide smoothly

- Smart tap vs drag: a quick tap on the front card opens its link; dragging never triggers it by accident

LINKS & BUTTONS

- Give each slide an image link (tap the front card to open it)

- Or add an optional call-to-action button per slide, with its own text and link

- The button opens its own link, or falls back to the slide link

3D & LAYOUT

- Full Circle mode spreads slides evenly around the ring so there's always depth behind the centre

- Ring radius, perspective, side scale, opacity and back opacity all adjustable

- Custom card width, height and corner radius

STYLE

- Five arrow icon styles (chevron, arrow, caret, angle, triangle) with custom shape, size and colours

- Custom dots, container radius, border and padding

- Background and optional shading

RESPONSIVE

- The whole scene scales down proportionally to fit phones and small sections, keeping the 3D proportions intact — set your design width and it just fits.

Built with clean code — no dependencies, no WebGL, images preloaded so navigation never stutters. Every property is editable directly in Framer.

From Gazi Efe

Iris Carousel
Magnet Button
Plan Compare
Spectrum Button

Related Components

CMS Fan Carousel
Video Slide Show
Image Corridor
Prism Curve Carousel