Skip to content

component

RING

By Antariksh "Ryan" Borgohain

Details

Summary

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

Description

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

Introduction

A rotating 3D image ring with cursor par

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600175658/148/228/309/79/15
  • All · #7565