Add a dynamic, interactive gradient background to your Framer website with Gradient Blinds. The component combines colorful gradients, animated light movement, blind-style patterns, mouse interaction, and subtle distortion to create a modern liquid/glass-inspired visual effect.
Live Preview: https://frostglass.framer.website/
Gumroad Link: https://rohitanand.gumroad.com/l/sqaxvg?wanted=true
Multi-Color Gradients — Add up to 8 custom colors.
Interactive Mouse Effect — Spotlight follows the user's cursor with smooth damping.
Gradient Angle — Rotate the gradient from 0° to 360°.
Blind Count — Control the number of animated gradient sections.
Mirror Gradient — Create symmetrical gradient patterns.
Spotlight Controls — Adjust radius, softness, and opacity.
Noise — Add subtle organic texture to the background.
Distortion — Add movement and warping to the gradient.
Shine Direction — Switch the blind highlight direction.
Responsive — Automatically adapts to the size of its Framer frame.
Performance Optimized — WebGL animation pauses when the component is outside the viewport.
Static Rendering Support — Includes a static fallback for Framer's canvas, export, and static rendering environments.
Fully Customizable — Adjust the visual style directly through Framer Property Controls.
Use Gradient Blinds for hero sections, landing pages, SaaS websites, portfolios, Web3 websites, backgrounds, feature sections, and interactive visual effects where you want a strong visual element without adding complicated setup.
Built with WebGL for smooth, GPU-powered visual effects while including viewport and static-renderer optimizations for better Framer performance.
Add a dynamic, interactive gradient background to your Framer website with Gradient Blinds. The component combines colorful gradients, animated light movement, blind-style patterns, mouse interaction, and subtle distortion to create a modern liquid/glass-inspired visual effect.
Live Preview: https://frostglass.framer.website/
Gumroad Link: https://rohitanand.gumroad.com/l/sqaxvg?wanted=true
Multi-Color Gradients — Add up to 8 custom colors.
Interactive Mouse Effect — Spotlight follows the user's cursor with smooth damping.
Gradient Angle — Rotate the gradient from 0° to 360°.
Blind Count — Control the number of animated gradient sections.
Mirror Gradient — Create symmetrical gradient patterns.
Spotlight Controls — Adjust radius, softness, and opacity.
Noise — Add subtle organic texture to the background.
Distortion — Add movement and warping to the gradient.
Shine Direction — Switch the blind highlight direction.
Responsive — Automatically adapts to the size of its Framer frame.
Performance Optimized — WebGL animation pauses when the component is outside the viewport.
Static Rendering Support — Includes a static fallback for Framer's canvas, export, and static rendering environments.
Fully Customizable — Adjust the visual style directly through Framer Property Controls.
Use Gradient Blinds for hero sections, landing pages, SaaS websites, portfolios, Web3 websites, backgrounds, feature sections, and interactive visual effects where you want a strong visual element without adding complicated setup.
Built with WebGL for smooth, GPU-powered visual effects while including viewport and static-renderer optimizations for better Framer performance.
