Ring Spiral Gallery

Add a premium interactive 3D ring and spiral media gallery to your Framer site with smooth drag rotation, dynamic scroll bending, and cinematic parallax depth.

Features

• Real-time 3D WebGL rendering engine

• Dual layout modes: Cinematic Rings or Infinite Spiral

• Smooth drag and scroll rotation physics

• Dynamic scroll-bend and vertical lift effects

• Custom glassmorphism hover tooltips with exact mouse tracking

• Interactive custom trailing cursor

• Mixed media support (High-res Images & MP4/WebM Videos)

• Highly optimized performance with strict WebGL auto-cleanup

• Responsive resize handling and camera zoom controls

• Sandwiched HTML center content layer for interactive CTA placement

Customization Options

• Gallery layout mode (Rings vs. Spiral)

• Cylinder radius, spiral offset, and row spacing

• Media card width, height, and corner border radius

• Auto-rotation speed and vertical drift speeds

• Drag, scroll, and damping physics (friction)

• Scroll bend and lift visual intensity

• Custom cursor color and dot size

• Center frame element scaling

• Mouse parallax depth influence

How to Use

• Drop the component onto your Framer canvas

• Upload your images and videos in the properties panel

• Choose your layout shape (Rings or Spiral)

• Adjust the cylinder radius, rotation speed, and gap spacing

• Connect a frame to the center content slot (optional)

• Publish for a premium interactive 3D showcase

Use Cases

• Premium portfolio layout showcases

• Immersive photography and art galleries

• Modern creative agency case studies

• Interactive product feature blocks

• Cinematic landing page heroes

• Video highlight reels and media walls

• Futuristic SaaS interfaces