Gradient Blinds is a cinematic WebGL shader component designed for immersive interactive backgrounds in Framer. It combines animated blind shading, mouse reactive spotlight effects, chromatic noise, distortion motion, and dynamic gradients into a premium visual experience.
The shader features vertical blind style shading with layered gradient blending, smooth spotlight tracking, noise overlays, and optional barrel distortion that reacts fluidly to user interaction.
Built in color presets allow instant visual transformations, while custom gradient support enables designers to create unique atmospheric backgrounds with up to eight color stops.
Customization includes blind count, gradient angle, noise intensity, spotlight radius, mouse dampening, distortion amount, mirror gradients, shine direction, and animation controls for full creative flexibility.
Optimized with raw WebGL rendering, Gradient Blinds delivers smooth performance and responsive motion across desktop and mobile devices.
Interactive WebGL gradient shader
Mouse reactive spotlight motion
Animated blind shading effects
Chromatic noise and grain overlays
Dynamic distortion and ripple motion
Built in gradient color presets
Custom multi color gradient support
Adjustable spotlight and glow controls
Mirror gradient and shine direction options
Responsive and performance optimized
Hero background sections
Landing page visuals
Creative agency websites
Portfolio and showcase pages
Experimental web experiences
Premium product presentations
Designers building immersive interfaces
Agencies creating cinematic visuals
Brands focused on interactive backgrounds
Portfolios needing atmospheric motion
Websites driven by modern shader effects
Turns static backgrounds into immersive experiences
Combines motion, gradients, and interaction in one shader
Enhances visual depth with spotlight and distortion effects
Provides instant customization through presets and controls
Delivers premium cinematic visuals with smooth WebGL performance
Frame Craft
