3D Repel Gallery

Add a premium, interactive 3D media scatter effect to your site. Cards seamlessly float in 3D space, tilt dynamically, and smoothly repel from the user's cursor using advanced, high-performance physics.

Features

• Real-time cursor repel physics

• Premium WebGL-powered 3D card tilt

• Smooth elastic spring damping

• Highly optimized vanilla JavaScript rendering pipeline

• Automated memory cleanup routines

• Smart static renderer fallback for maximum compatibility

• De-duplicated video and image texture caching

• True sRGB color space preservation

• Fully customizable layout spread and card count

• Responsive auto-resizing grid

Customization Options

• Camera view distance

• Total card count

• Scatter spread width and height

• Scatter noise and randomness

• Card dimensions (width/height)

• Cursor repel radius and force

• Spring stiffness and damping

• 3D tilt intensity

• Background color

• Idle drift speed and range

• Custom video and image uploads

How to Use

• Drop the 3D Repel Gallery component onto your Framer canvas

• Upload your custom videos or images via the property controls

• Adjust the scatter spread to fit your section size

• Tune the repel radius and tilt intensity for the perfect interactive feel

• Set the background color to seamlessly blend with your UI

• Publish for a highly optimized, interactive 3D media grid

Use Cases

• Premium portfolio showcases

• Interactive media galleries

• Creative agency landing pages

• Dark-mode AI interfaces

• Dynamic background sections

• Modern video carousels

• Minimalist fashion lookbooks

• Web3 and tech hero sections