---
title: "Glowing Magic Rings — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Deckle · Effects. Glowing animated concentric rings"
canonical: "https://framer.elliotli.dev/component/glowing-magic-rings"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Glowing Magic Rings

# Glowing Magic Rings

Glowing animated concentric rings

[View on Framer](https://framer.com/marketplace/components/glowing-magic-rings/?via=elliot-li)

![Glowing Magic Rings preview image 1](https://framer.elliotli.dev/og/component/glowing-magic-rings/50f56a2ad9624e8f/1600x1200.jpg)

## Summary

Glowing animated concentric rings

## Description

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:**

1.  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.
    
2.  In the property panel, set **Color** and **Color Two** to control the gradient across the rings.
    
3.  Adjust **Ring Count**, **Base Radius**, **Radius Step**, and **Ring Gap** to change how many rings appear and how they're spaced.
    
4.  Use **Speed** and **Scale Rate** to control how fast the rings expand and loop.
    
5.  Tune **Line Thickness**, **Attenuation**, and **Noise Amount** to change the glow's sharpness and texture.
    
6.  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.
    
7.  Enable **Click Burst** to trigger a brief burst/scale pulse when the layer is clicked.
    
8.  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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4618

## Details

- **Author**: Deckle
- **Price**: $10.00
- **Published**: 2026-07-15
- **Updated**: 2026-07-15
- **Added**: 2026-07-15
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo