Image Slider
Advanced WebGL-powered image slider with shader-based transitions. Features smooth displacement effects, Three.js rendering, and GSAP animations for seamless image transitions.
Main Features of Image Slider
How to Use Image Slider in Next.js
Installation Guide for Image Slider
Related Components
404 Page
Animated 404 error page with a floating astronaut illustration. Features smooth motion animations, interactive hover effects, and a clean retro-futuristic design with framer-motion.
Dig Hole
Interactive video-based website with scroll-triggered reveals and smooth transitions. Features a cinematic video background with menu items that reveal content on scroll.
Flower Animation
Beautiful CSS-based flower animation with multiple blooming flowers, glowing lights, and smooth animations. Features intricate CSS animations creating a mesmerizing night garden effect.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QHow were the transitions made?
The component uses Three.js displacement shaders that 'warp' the image texture during transitions for a high-fidelity liquid feel.
QIs GSAP required?
Yes, GSAP is used to orchestrate the hardware-accelerated shader timing and ensure that the displacement maps sync perfectly with user clicks.
QCan I adjust the speed?
The transition frequency is hard-coded for cinematic impact but can be adjusted in the internal Three.js animation controller.