Two-Phase Carousel: Premium Carousels Component by Konstantin Nikolaev

A two-phase scroll gallery: items orbit on a circle as you scroll, snap into a horizontal carousel, then step through one-by-one. Editorial focus scaling, customisable titles with five reveal animations, hover interactions, optional intro rotation. Fully tunab

About this Component

CIRCULAR SCROLL GALLERY

A two-phase, scroll-driven photo gallery built for editorial layouts. Phase one arranges your items on a rotating circle that responds to scroll. Phase two snaps the focused item into a centered carousel where you step through, item-by-item, with optional scroll-navigation and arrow controls.

ITEMS

- Add as many items as you need (up to 20)

- Each item supports a Framer Responsive Image with alt text

- Per-item link to internal or external pages

- Per-item title that displays above or below the image

- Round or square item shape

PHASE 1 — THE ROTATION

As the user scrolls, items orbit around a circle and the camera tilts subtly to give the rotation depth. The focused item gradually scales up and shifts toward viewport centre, ready to hand off to phase two.

Controls:

- Scroll Length — vh reserved for the rotation animation

- Rotations — number of full turns before snapping

- Tilt — subtle 3D lean during rotation

- Item Scale — base size of non-focused items

- Focus Effect — toggle the focus emphasis on or off

- Focus Scale — how much the focused item grows

- Focus Sharpness — gradient vs. spotlight focus

- Intro Rotation — optional one-time spin on mount, decelerating to rest, hinting that the gallery is interactive

PHASE 2 — THE GALLERY

Once the rotation completes, the gallery snaps into a horizontal step-through. Navigation is true step-by-step: scrolling never skips items and never lands you between two of them. Each item passes through centre.

Controls:

- Scroll Navigation — keep scrolling to advance through items, or stop after the snap

- Arrows — show or hide left/right arrows

- Arrow Color and Arrow Background

TITLES

Each item can carry its own title, fully styleable.

- Show or hide titles

- Position above or below the image

- Padding distance from the image

- Font, color, size

- Five reveal animations: Slide Bottom, Slide Bottom + Blur, Slide Top, Slide Top + Blur, Blur Fade

HOVER