LuminaSlider is a WebGL shader slider for Framer that mixes images and video, with five shader transitions and six cycling text reveal animations.
Every slide change runs through real GLSL shader effects, not CSS fades, with four intensity presets per effect from subtle to extreme.
WHAT IT DOES A left vertical rail shows slide progress and lets visitors jump to any slide. Title and description animate in with one of six entrance styles, cycling automatically. A counter tracks position as numbers or roman numerals.
KEY FEATURES
Five WebGL shader transitions, Glass, Frost, Ripple, Plasma, Timeshift
Four intensity presets per effect, from Subtle to extreme
Mixed media slides, images and video in any combination
Video slides auto-play, loop, and sync playback to the active slide
Six cycling GSAP text reveal animations for titles and descriptions
Left vertical rail navigation with live progress bars, clickable per slide
Auto-play with configurable speed and transition duration
Mouse wheel navigation with debounced input
Numeric or roman numeral slide counter
Full typography, color, and overlay controls
Performance-aware, pauses rendering when off-screen or tab hidden
Graceful static fallback for the Framer canvas and editor preview
Zero manual setup, single self-contained code component
WHY IT WORKS Most Framer sliders fade or slide between images. LuminaSlider transitions through real shader distortion and refraction, the kind of motion normally reserved for custom WebGL builds, now handling both photo and video in one pipeline.
PERFECT FOR Creative agency hero sections, studio portfolios, fashion and film showcases, and product launches that want real production-level visual weight.
WHAT'S INCLUDED A single drop-in code component. Add up to 6 slides, mix images and video, choose your effect and preset, tune colors and typography through property controls.
LuminaSlider is a WebGL shader slider for Framer that mixes images and video, with five shader transitions and six cycling text reveal animations.
Every slide change runs through real GLSL shader effects, not CSS fades, with four intensity presets per effect from subtle to extreme.
WHAT IT DOES A left vertical rail shows slide progress and lets visitors jump to any slide. Title and description animate in with one of six entrance styles, cycling automatically. A counter tracks position as numbers or roman numerals.
KEY FEATURES
Five WebGL shader transitions, Glass, Frost, Ripple, Plasma, Timeshift
Four intensity presets per effect, from Subtle to extreme
Mixed media slides, images and video in any combination
Video slides auto-play, loop, and sync playback to the active slide
Six cycling GSAP text reveal animations for titles and descriptions
Left vertical rail navigation with live progress bars, clickable per slide
Auto-play with configurable speed and transition duration
Mouse wheel navigation with debounced input
Numeric or roman numeral slide counter
Full typography, color, and overlay controls
Performance-aware, pauses rendering when off-screen or tab hidden
Graceful static fallback for the Framer canvas and editor preview
Zero manual setup, single self-contained code component
WHY IT WORKS Most Framer sliders fade or slide between images. LuminaSlider transitions through real shader distortion and refraction, the kind of motion normally reserved for custom WebGL builds, now handling both photo and video in one pipeline.
PERFECT FOR Creative agency hero sections, studio portfolios, fashion and film showcases, and product launches that want real production-level visual weight.
WHAT'S INCLUDED A single drop-in code component. Add up to 6 slides, mix images and video, choose your effect and preset, tune colors and typography through property controls.
Hamim Reza
