ShaderSlider

WebGL slider with shader transition fx.

A WebGL image slider with five shader transition effects and six cycling text reveal animations. Built for studios, agencies, and creative developers who need a hero slider that looks unlike anything else. Features Five WebGL shader transitions — glass, frost, ripple, plasma & timeshift Six cycling text reveal animations per slide — stagger, blur, scale, flip & more Auto-play with configurable slide duration and transition speed Visual progress indicators and optional slide counter Chromatic aberration and RGB channel separation on glass effect Configurable intensity, speed multiplier and distortion strength Dark overlay with adjustable opacity for text legibility Full typography controls for title, description, nav and counter Responsive via ResizeObserver — adapts to any container size Pauses auto-play when browser tab is hidden Accessible — ARIA labels, aria-current, semantic nav elements Up to 6 slides supported Shader Effects Glass — refraction, chromatic aberration & liquid flow Frost — crystalline ice pattern coverage Ripple — water-like wave distortion Plasma — high-energy electric field transitions Timeshift — temporal warp and image displacement Property Controls Slides — title, description, image per slide (up to 6) Effect — glass, frost, ripple, plasma, timeshift + presets per effect Timing — auto-play toggle, slide speed (1000–20000ms), transition duration (0.2–6s) Intensity — global intensity, speed multiplier, distortion strength Styling — overlay strength, text color Typography — title, description, nav, counter fonts Colors — nav text, nav active, nav line colors UI — show counter toggle Technical Details THREE.js orthographic camera with custom GLSL fragment shader GSAP text animations with six cycling reveal patterns Dynamic CDN script loading — no manual installs required ResizeObserver for responsive canvas updates Visibility API pauses auto-play on tab hide Proper WebGL resource disposal on unmount Pixel ratio capped at 2x for performance Requirements Framer Sites 2024 or later. WebGL and ES6+ required. GSAP and THREE.js load from CDN automatically. External images must return CORS headers. Use Cases Hero sliders · Agency homepages · Creative portfolios · Product showcases · Brand campaigns · Photography galleries

WebGL slider with shader transition fx.