Magic Rings is a GPU-powered background component built entirely on WebGL 2 shaders. Up to 10 concentric rings expand outward in looping fade cycles, rendered with mathematically precise exponential attenuation and angular falloff for a clean, cinematic glow.
Every visual parameter is live-editable directly in the Framer canvas — colors, ring count, thickness, gap, rotation, opacity, noise, fade timing — all hot-swap without restarting the animation.
Interactivity built in. Enable mouse follow and the rings drift toward your cursor. Hover over the component and they bloom outward via a smooth scale transition. Click anywhere for a burst flash. Each effect is individually toggleable so you only pay for what you use.
Production-ready performance. The WebGL context is created once and never torn down on prop changes, eliminating the "too many active WebGL contexts" crash. The animation loop pauses automatically when the tab is hidden or the element scrolls out of view, and resumes cleanly on return. Pixel ratio is capped at 1× inside the Framer editor and 2× on published sites. ResizeObserver redraws are throttled to prevent layout thrash.
Works as a full-bleed hero background, a section accent, or a contained decorative element. Supports transparent compositing so it layers naturally over any background.
As a hero background: Set width and height to fill the frame, place it behind your headline layer, and enable a subtle blur (2–4px) for a soft, dreamy feel.
Freeze while designing: Toggle Preview Off to stop the loop — the component renders a clean still frame so the canvas stays snappy.
Single accent color: Set Color and Color Two to the same value for a monochrome ring effect.
Tight pulse: Lower Scale Rate to 0.05 and raise Attenuation to 20+ for rings that barely move but glow intensely.
Deep parallax: Set Parallax to 0.15+ with Follow Mouse On for a pronounced 3D layered depth effect.
Sperara
