Updated: Magic Rings
By Steven Van ·
The rebuilt Backgrounds component is about three times faster and adds 3D motion, hover and click reactions, prism fringes and a light mode.
React Bits has rebuilt its Magic Rings component from scratch and moved it to the Backgrounds section. The vendor says the new version is lighter and about three times faster, with crisper lines and glow.
New behaviour
The component is described as glowing rings that pulse outward in a wave, swell toward the cursor and flare on click. According to the vendor's summary, the rings can now:
- ripple, breathe, spin or lean in 3D
- react to hover and clicks
- split into prism fringes
- work in light mode
Installing
The Magic Rings page offers JavaScript or TypeScript versions, with plain CSS or Tailwind. The TypeScript and Tailwind variant installs with npx shadcn@latest add @react-bits/MagicRings-TS-TW. The page's interactive preview, customization controls and source tabs need JavaScript enabled.
The page lists Prismatic Burst, Antigravity and Magnet Lines as related components.