ScanlineSlider is a retro CRT-styled WebGL shader slider for Framer, mixing images and video with five shader transitions and an authentic scanline look.
Every slide sits inside a dark stage with a glowing accent border and flickering scanlines, like content on an old broadcast monitor. Underneath runs a real GLSL shader engine, Glass, Frost, Ripple, Plasma, Timeshift, each with four intensity presets.
WHAT IT DOES Navigation happens through glass-style clickable dots at the bottom, no arrow buttons. An auto-fading minimap slides in from the left on navigation activity, showing thumbnails including auto-generated frames from video slides, then fades after a moment of inactivity.
KEY FEATURES
Retro CRT stage, adjustable scanline opacity and glowing accent border
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
Glass-style dot pagination, clean and arrow-free
Auto-fading minimap with live video thumbnails
Minimap visibility modes: Always, On Scroll, or Never
Six cycling GSAP text reveal animations for titles and descriptions
Adjustable corner radius and accent color to match your brand
Numeric or roman numeral slide counter
Performance-aware, pauses when off-screen or tab hidden
Zero manual setup, self-contained code component
WHY IT WORKS Retro CRT effects on the marketplace are mostly static overlays. ScanlineSlider builds the look into a working shader slider, real transitions and navigation, not a filter over a flat image.
PERFECT FOR Gaming portfolios, music sites, vaporwave and 80s-inspired brands, and any Framer site wanting a nostalgic broadcast-monitor feel with shader motion.
WHAT'S INCLUDED A single drop-in component. Add up to 6 slides, mix images and video, tune scanlines, accent color, and effect through property controls.
ScanlineSlider is a retro CRT-styled WebGL shader slider for Framer, mixing images and video with five shader transitions and an authentic scanline look.
Every slide sits inside a dark stage with a glowing accent border and flickering scanlines, like content on an old broadcast monitor. Underneath runs a real GLSL shader engine, Glass, Frost, Ripple, Plasma, Timeshift, each with four intensity presets.
WHAT IT DOES Navigation happens through glass-style clickable dots at the bottom, no arrow buttons. An auto-fading minimap slides in from the left on navigation activity, showing thumbnails including auto-generated frames from video slides, then fades after a moment of inactivity.
KEY FEATURES
Retro CRT stage, adjustable scanline opacity and glowing accent border
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
Glass-style dot pagination, clean and arrow-free
Auto-fading minimap with live video thumbnails
Minimap visibility modes: Always, On Scroll, or Never
Six cycling GSAP text reveal animations for titles and descriptions
Adjustable corner radius and accent color to match your brand
Numeric or roman numeral slide counter
Performance-aware, pauses when off-screen or tab hidden
Zero manual setup, self-contained code component
WHY IT WORKS Retro CRT effects on the marketplace are mostly static overlays. ScanlineSlider builds the look into a working shader slider, real transitions and navigation, not a filter over a flat image.
PERFECT FOR Gaming portfolios, music sites, vaporwave and 80s-inspired brands, and any Framer site wanting a nostalgic broadcast-monitor feel with shader motion.
WHAT'S INCLUDED A single drop-in component. Add up to 6 slides, mix images and video, tune scanlines, accent color, and effect through property controls.
Hamim Reza
