MagicRings is a WebGL-powered background effect that renders a set of glowing, pulsing rings expanding outward from the center, each fading in and out on a loop. It uses a custom GLSL shader (via Three.js) for smooth, GPU-accelerated animation with a two-color gradient across the rings, subtle noise/grain, and optional mouse-reactive movement.
How to use it:
Drag the MagicRings layer onto your canvas and resize it to fill the area you want the effect in (a hero section, card background, etc.) — the layer needs a defined width and height to render.
In the property panel, set Color and Color Two to control the gradient across the rings.
Adjust Ring Count, Base Radius, Radius Step, and Ring Gap to change how many rings appear and how they're spaced.
Use Speed and Scale Rate to control how fast the rings expand and loop.
Tune Line Thickness, Attenuation, and Noise Amount to change the glow's sharpness and texture.
Toggle Follow Mouse to make the rings shift with cursor movement (adjust Mouse Influence and Parallax for intensity), and set Hover Scale for a scale-up effect on hover.
Enable Click Burst to trigger a brief burst/scale pulse when the layer is clicked.
Use Opacity, Blur, and Rotation as final styling touches, and layer it behind text or UI elements using Framer's layer order for a glowing backdrop effect.
MagicRings is a WebGL-powered background effect that renders a set of glowing, pulsing rings expanding outward from the center, each fading in and out on a loop. It uses a custom GLSL shader (via Three.js) for smooth, GPU-accelerated animation with a two-color gradient across the rings, subtle noise/grain, and optional mouse-reactive movement.
How to use it:
Drag the MagicRings layer onto your canvas and resize it to fill the area you want the effect in (a hero section, card background, etc.) — the layer needs a defined width and height to render.
In the property panel, set Color and Color Two to control the gradient across the rings.
Adjust Ring Count, Base Radius, Radius Step, and Ring Gap to change how many rings appear and how they're spaced.
Use Speed and Scale Rate to control how fast the rings expand and loop.
Tune Line Thickness, Attenuation, and Noise Amount to change the glow's sharpness and texture.
Toggle Follow Mouse to make the rings shift with cursor movement (adjust Mouse Influence and Parallax for intensity), and set Hover Scale for a scale-up effect on hover.
Enable Click Burst to trigger a brief burst/scale pulse when the layer is clicked.
Use Opacity, Blur, and Rotation as final styling touches, and layer it behind text or UI elements using Framer's layer order for a glowing backdrop effect.
Deckle
