SwirlReveal

Scroll-driven circular image reveal

A scroll-driven gallery component that arranges 8 images in a circle and reveals them as the user scrolls. Each image flies in from the side, rotates into position, and fades in — staggered for a fluid, cinematic effect.

Works on all devices. Fully responsive using CSS vw units. Compatible with Framer Preview and published sites.

Features:

• 8 customizable image slots via property controls

• Scroll-driven animation with sticky viewport pinning

• Staggered entry with power1.out easing

• Hub size, image offset, scroll height and stagger all adjustable

• No external libraries — pure React + CSS