3D Media Showcase

Add a premium interactive 3D media carousel to your Framer site with smooth momentum dragging, video autosync, and dynamic camera tracking.

Features

• Real-time Vanilla Three.js rendering pipeline

• Physical momentum and slide friction physics

• Video autosync with auto-play and pause on hover

• Dynamic mouse parallax and stage tilt

• Interactive story progress pill indicators

• Smart static renderer fallbacks for the canvas

• Automatic WebGL memory cleanup and context disposal

• 100% faithful true-color media output with sRGB mapping

• Responsive resize handling for all viewports

• Clean prop-flattening controls for easy editing

Customization Options

• Media items (Image or Video)

• Card width and height

• Corner border radius

• Camera depth distance

• Inactive card scaling and depth dimming

• Drag sensitivity and physics momentum

• Autoplay slide duration

• Background and physical chassis backing colors

• Story progress indicator accent color

How to Use

• Drop the component onto your Framer canvas

• Upload your images or MP4/WebM video files

• Tweak the camera distance and card dimensions

• Adjust the lighting and accent colors to match minimalist camel, sand, or dark mode themes

• Tune the momentum and drag sensitivity

• Publish for a premium interactive spatial gallery

Use Cases

• Premium SaaS feature showcases

• High-end fashion product lookbooks

• Cinematic video sliders

• Dark mode UI interfaces

• Immersive landing pages

• Creative agency portfolios

• Digital storefronts and marketplaces

• Web3 and AI product showcases