Give your website a futuristic, high-end feel with the Animated Glow Shape component. This powerful WebGL background renders beautifully animated, glowing shapes—choose from a circle, box, or triangle—that smoothly cycle through a customizable three-color gradient. It includes a magnetic hover effect, where the glowing shape intelligently pulls toward the user's cursor, creating a deeply interactive and engaging visual experience.
Designed with both aesthetics and performance in mind, it features an automatic off-screen pause mechanism via an Intersection Observer to save your users' system resources. Whether you are designing for Web3, modern SaaS landing pages, or creative portfolios, this component provides the perfect ambient, high-tech backdrop.
Functions (Key Features):
🎨 Custom Shapes & Colors: Choose between a Circle, Box, or Triangle, and blend three vibrant colors into a seamless, rotating gradient.
🧲 Magnetic Hover: Enable 'Magnetic Hover' to make the glowing shape dynamically pull towards the user's mouse cursor.
✨ Versatile Textures: Toggle between a hard Beam, a Smooth Glow, or a stylized Grainy texture with adjustable noise intensity and speed.
💓 Pulse & Glow Control: Fine-tune the inner and outer glow thickness, blur amount, and add a rhythmic pulse animation.
🚀 Optimized Performance: Built with pure GLSL shaders and a smart visibility sensor that automatically pauses the rendering when scrolled out of view.
How to Use:
Copy & Paste: Insert the component onto your Framer canvas. It works best scaled to 100% Width & Height as an absolute background layer in your hero section.
Select Shape: Choose your desired base shape (Circle, Box, or Triangle) and adjust its Width and Height sliders.
Style the Glow: Pick 3 gradient colors, select your Effect Type (Beam, Grainy, Smooth Glow), and adjust the Blur and Thickness.
Interactivity: Turn on Magnetic Hover and adjust the Pull Strength to make the background react organically to cursor movements.
Blend Modes: Experiment with the Blend Mode (Normal, Additive, Screen, Overlay) to perfectly integrate the glowing light with your underlying background color.
Give your website a futuristic, high-end feel with the Animated Glow Shape component. This powerful WebGL background renders beautifully animated, glowing shapes—choose from a circle, box, or triangle—that smoothly cycle through a customizable three-color gradient. It includes a magnetic hover effect, where the glowing shape intelligently pulls toward the user's cursor, creating a deeply interactive and engaging visual experience.
Designed with both aesthetics and performance in mind, it features an automatic off-screen pause mechanism via an Intersection Observer to save your users' system resources. Whether you are designing for Web3, modern SaaS landing pages, or creative portfolios, this component provides the perfect ambient, high-tech backdrop.
Functions (Key Features):
🎨 Custom Shapes & Colors: Choose between a Circle, Box, or Triangle, and blend three vibrant colors into a seamless, rotating gradient.
🧲 Magnetic Hover: Enable 'Magnetic Hover' to make the glowing shape dynamically pull towards the user's mouse cursor.
✨ Versatile Textures: Toggle between a hard Beam, a Smooth Glow, or a stylized Grainy texture with adjustable noise intensity and speed.
💓 Pulse & Glow Control: Fine-tune the inner and outer glow thickness, blur amount, and add a rhythmic pulse animation.
🚀 Optimized Performance: Built with pure GLSL shaders and a smart visibility sensor that automatically pauses the rendering when scrolled out of view.
How to Use:
Copy & Paste: Insert the component onto your Framer canvas. It works best scaled to 100% Width & Height as an absolute background layer in your hero section.
Select Shape: Choose your desired base shape (Circle, Box, or Triangle) and adjust its Width and Height sliders.
Style the Glow: Pick 3 gradient colors, select your Effect Type (Beam, Grainy, Smooth Glow), and adjust the Blur and Thickness.
Interactivity: Turn on Magnetic Hover and adjust the Pull Strength to make the background react organically to cursor movements.
Blend Modes: Experiment with the Blend Mode (Normal, Additive, Screen, Overlay) to perfectly integrate the glowing light with your underlying background color.
