Interactive magic rings effect with customizable parameters.
Switch between the Basic and Card layouts, then tune the rings with the controls underneath. Turn on Follow Mouse or Click Burst to make the rings react to the pointer.
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | '#fc42ff' | Hex color for the rings. |
colorTwo | string | '#42fcff' | Second color. Rings interpolate from color to colorTwo. |
ringCount | number | 6 | Number of concentric rings to draw (1-10). |
speed | number | 1 | Animation speed multiplier. |
attenuation | number | 10 | Glow falloff. Higher values produce tighter glow. |
lineThickness | number | 2 | Thickness of each ring line. |
baseRadius | number | 0.35 | Radius of the innermost ring (normalized). |
radiusStep | number | 0.1 | Spacing between successive rings. |
scaleRate | number | 0.1 | How much rings expand over time. |
opacity | number | 1 | Overall opacity of the effect (0-1). |
blur | number | 0 | CSS blur in px. Creates a bloom/glow effect. |
noiseAmount | number | 0.1 | Film-grain noise intensity. |
rotation | number | 0 | Static rotation of the pattern in degrees. |
ringGap | number | 1.5 | Exponential base for angular cutaway per ring. |
fadeIn | number | 0.7 | Duration of ring fade-in within cycle. |
fadeOut | number | 0.5 | Start time of ring fade-out within cycle. |
followMouse | boolean | false | Rings shift toward the mouse cursor. |
mouseInfluence | number | 0.2 | Strength of mouse follow (when followMouse is true). |
hoverScale | number | 1.2 | Scale multiplier on hover. |
parallax | number | 0.05 | Per-ring depth offset based on mouse position. |
clickBurst | boolean | false | Click triggers a brightness flash and scale pulse. |
alphaMode | 'luminance' | 'coverage' | 'luminance' | Uses emissive luminance alpha on dark surfaces or geometry coverage alpha for dark colors on light surfaces. |
Keyboard shortcuts and ARIA behavior.