RING

Bring your images to life with a continuously rotating 3D ring that tilts and shifts with your cursor.

RING is an interactive 3D image gallery for Framer built for bold hero sections, client showcases, editorial layouts, and any page that needs a strong visual centrepiece. Upload your images, set the card count and ring radius, and let the rotation and cursor parallax do the rest.

Key Features:

• Continuously rotating 3D ring built entirely on CSS 3D transforms

• Cursor-driven parallax tilt on both X and Y axes

• Staggered intro animation with configurable duration and timing

• Images repeat automatically to fill any card count up to 96

• Upload up to 12 source images with alt text support

• Independent yaw and tilt strength controls for the mouse parallax

• Adjustable ring radius, card size, border radius, and base tilt

Controls:

• Card Count sets how many cards appear around the ring

• Ring Radius controls the overall size of the ring

• Base Tilt sets the resting angle of the ring

• Auto Rotate Speed controls how fast the ring spins

• Mouse Yaw controls left and right tilt with the cursor

• Mouse Tilt controls forward and backward tilt with the cursor

• Scene Perspective adjusts the depth of the 3D view

• Intro Duration and Intro Stagger control the entry animation timing

Best For:

• Hero sections with strong rotational motion

• Client and portfolio showcase layouts

• Fashion, editorial, and luxury brand sites

• Creative agency and studio landing pages

• Any section where a static gallery isn't enough