React WebGL Distortion Slider

A stunning, high-performance WebGL-powered image slider component for React applications. Features beautiful distortion effects, smooth animations, and full touch support.

✨ Features

• 🎨 WebGL Distortion Effects - Smooth, GPU-accelerated distortion transitions
• 📱 Touch Support - Full swipe gesture support for mobile devices
• ⚡ High Performance - Optimized Three.js rendering with minimal overhead
• 🎯 Custom Cursor - Optional custom circular cursor with smooth animations
• 🔄 Auto-play - Configurable automatic slide advancement
• 📐 Responsive - Adapts perfectly to any container size
• 🎛️ Highly Customizable - Extensive props for fine-tuning behavior and appearance
• 📦 TypeScript Ready - Full type definitions included

🚀 Quick Start

npm install react-webgl-distortion-slider

import { WebGLSlider } from "react-webgl-distortion-slider";

function App() {
  const images = [
    "/images/slide1.jpg",
    "/images/slide2.jpg",
    "/images/slide3.jpg",
  ];

  return (
    <WebGLSlider
      images={images}
      autoPlay={true}
      interval={5000}
      showCursor={true}
    />
  );
}

📖 Documentation

For full documentation, examples, and API reference, visit the live demo.

🛠️ Development

# Install dependencies
pnpm install

# Run development server
pnpm dev

# Build for production
pnpm build

# Run Storybook
pnpm storybook

📄 License

MIT © Mario Carlos