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.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| slides | SlideItem[] | DEFAULT_SLIDES | Array of images and titles for the slider. |
| autoPlay | boolean | true | Enable or disable automatic slide transitions. |
| interval | number | 5000 | Time in milliseconds between slides. |
| accentColor | string | #ef4444 | The color of the status indicator and border. |
| showPagination | boolean | true | Show or hide the slide indicators. |
When to Use
Ideal for high-end fashion portfolios, 3D labs, and Next.js sites that want an interactive 'WebGL' aesthetic. Now fully controllable with props for autoplay, intervals, and accent colors.
Best Practices
Use high-contrast, bold imagery for the `slides` prop. Adjust the `interval` to balance between viewing time and engagement. Optimize for performance by managing the Three.js renderer lifecycle.
Why This Component Matters
WebGL-powered transitions create a sense of digital 'Fluidity' and craft. This production-ready UI template helps you build an interface that feels expensive and innovative, reflecting a brand identity rooted in technical excellence.
FAQ
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 the autoplay configurable?
Yes, use the `autoPlay` (boolean) and `interval` (number) props to control the automatic progression and timing of slides.
QCan I show/hide indicators?
The `showPagination` prop allows you to toggle the slide indicators on or off depending on your UI's minimalism requirements.
Related Components
404 Page
Interactive 404 error page featuring a cinematic canyon layout with multi-layered parallax cacti. Built with SVG and custom mouse-tracking logic for a deep 3D immersive feel.
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.