Slider Page
Advanced WebGL image slider with multiple shader effects (glass, frost, ripple, plasma, timeshift). Features Tweakpane controls, auto-slide functionality, and smooth transitions with GSAP.
Main Features of Slider Page
How to Use Slider Page in Next.js
Installation Guide for Slider Page
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.
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.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QWhat are the effects?
The component includes localized shaders for 'Glass' (blur), 'Frost' (crystalline), 'Plasma' (heat-map), and 'Time-Shift' (pixel delay) transitions.
QWhat is 'Tweakpane' for?
It allows you or your clients to fine-tune the shader uniforms (intensity, blur, speed) in real-time to find the 'Perfect' atmospheric look for your brand.
QCan I use external images?
Absolutely, it's designed as a production-ready WebGL container that accepts any high-fidelity image textures for the slide sequence.