Ripple Rings

How to use it

Tune here, paste once — it ships as about a kilobyte of WebGL.

1. 01
   Tune it here

   Pick a palette, drag the sliders, hit randomize. The prompt carries the values you see, not the defaults.

2. 02
   Pick your stack

   Single HTML by default. Switch to Next.js, React, Vue, Astro, WordPress, Shopify or Webflow and the output contract changes with it.

3. 03
   Paste it into your AI

   Claude, Cursor, ChatGPT, Copilot, v0 — anything that writes code. You get a self-contained canvas with the shader inline.

4. 04
   Mount it behind content

   First child of a relative container, content above it. Add a scrim if text needs more contrast.

5. 05
   Edit it later in code

   The uniforms stay named and the CONFIG object sits at the top of the script. Nothing is baked.