Twist Carousel

Showcase dynamic images and video reels in an interactive 3D WebGL card slider built with smooth spring mechanics, cinematic tilt motion, and fluid depth blurring.

Features

• Smooth spring-damped transition physics

• Native WebGL rendering via Three.js

• Full support for mixed images and autoplaying videos

• Dynamic edge-blur and depth opacity transitions

• Natural pointer drag and touch flick navigation

• Passive wheel scroll and keyboard controls

• Lightweight memory management with auto texture disposal

• Full static renderer compliance for fast Framer canvas editing

• Built-in client-side visitor media upload toggle

• Accessible ARIA slide labels and live status announcements

Customization Options

• Card width, aspect ratio, and layout zoom

• Vertical tilt angle and card gap spacing

• Autoplay toggle, interval timing, and travel duration

• Pre-movement anticipation dip strength

• Slide direction (Up / Down) and hover-to-pause

• Corner radius and dynamic edge-blur intensity

• Side card opacity and bottom drop shadow depth

• Drag sensitivity and wheel scroll navigation

• Maximum texture resolution and pixel ratio clamping

• Reduced motion preferences support

How to Use

• Drop the Twist Carousel component onto your Framer canvas

• Add your image URLs or upload video files directly in the properties panel

• Adjust card width, aspect ratio, and 3D tilt to match your layout

• Customize slide speed, spring easing, and auto-advance intervals

• Toggle visitor drag, mouse wheel, or navigation buttons

• Publish your site for smooth, GPU-accelerated 3D transitions

Use Cases

• Modern creative portfolio showcases

• Cinematic studio client project decks

• High-converting SaaS product tour slides

• Fashion lookbooks and editorial look showcases

• Brand media feeds and hero section sliders

• Agency case study presentations

• Dark-mode landing page highlights

• Video reel displays and motion showcases