Drag
Scroll

Features

Everything you need

A fully-featured WebGL slider with customizable animations, touch support, and TypeScript definitions.

🎨

Customizable Cursor

Configure cursor color, size, text label, and arrow visibility to match your brand.

âš¡

WebGL Performance

Smooth 60fps animations powered by Three.js and @react-three/fiber.

📱

Touch Support

Full touch and drag support for mobile devices with momentum scrolling.

🔄

Auto-play Control

Enable or disable auto-play with configurable speed and timing options.

🎯

TypeScript Ready

Full TypeScript support with exported types for type-safe development.

📦

Tree-shakeable

Import only what you need. Optimized for minimal bundle size.

Installation

Get started in seconds

Install with npm, yarn, or pnpm:

npm install webgl-distortion-slider-workspace
yarn add webgl-distortion-slider-workspace
pnpm add webgl-distortion-slider-workspace

Peer dependencies:

npm install react react-dom three @react-three/fiber @react-three/drei

Basic usage:

import { DistortionSlider } from 'webgl-distortion-slider-workspace'

const slides = [
  { id: 1, src: '/image1.jpg', title: 'Title', subtitle: 'Subtitle' },
  { id: 2, src: '/image2.jpg', title: 'Title', subtitle: 'Subtitle' },
]

function App() {
  return (
    <DistortionSlider
      slides={slides}
      timing={{ autoPlay: true }}
      cursor={{ color: '#e65c2e' }}
    />
  )
}

API

Configuration Options

CursorConfig

enabledboolean (true)
colorstring (#e65c2e)
sizenumber (112)
textstring (DRAG)
showArrowsboolean (true)

TimingConfig

autoPlayboolean (true)
autoPlaySpeednumber (0.00015)
momentumDecaynumber (0.95)
dragSensitivitynumber (0.0008)