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.
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
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
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
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
Framer Sites 2024 or later. WebGL and ES6+ required. GSAP and THREE.js load from CDN automatically. External images must return CORS headers.
Hero sliders · Agency homepages · Creative portfolios · Product showcases · Brand campaigns · Photography galleries
Hamim Reza
