LuminaSlider

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.