Moiré rings
Two sets of concentric rings drift over each other and create interference patterns that keep shifting.
Settings
Code
<div class="pt-moire"><i></i><i></i></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
Where to use it
Moiré is pure optical play, so it belongs in places that want to look bold and a little experimental: the homepage of an art gallery, a techno club’s event page or the site of a design conference. The pattern changes constantly as the rings slide, and you rarely see the same frame twice. A hypnotic moiré background in CSS.
Use it sparingly. Moiré can be uncomfortable for people who are sensitive to flicker, so keep it off pages meant for long reading and consider pausing it when someone has reduced motion turned on. Short headlines only.