ShaderSlider

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