Radial Spectrum is an evolving monochrome WebGL iris woven from granular rings, radial filaments and dark channels. Use it as a focal hero element, an audio or data visual, or a background for a centred headline. Size and inner aperture frame the iris, turbulence and filament density set its texture, and angular drift turns it slowly. Exposure, speed, variation, timeline offset and palette are editable, and the live editor and the HTML, React and Svelte exports share one original renderer.
How this shader works
Radial Spectrum is a slowly changing monochrome iris made of granular rings, radial filaments and dark channels. It works as a focal hero element, a visual for audio or data, or a background for a centred headline. Size and Inner aperture frame the iris, Turbulence and Filament density set its texture, and Angular drift turns it slowly.
Tips
- Inner aperture sets the size of the dark centre. Raise it to leave room for a logo or a short word.
- Angular drift is 0 by default. Raise it to make the iris rotate.
- Lower Turbulence for clean, even rings.
- Change Filaments from white to a single brand colour for a tinted version.
Questions
How do I make an animated iris or circular pattern behind a headline?
Open Radial Spectrum, set Size and Inner aperture so the centre sits behind your text, and keep Speed low. Export it as an HTML file or a React or Svelte component.
Does it react to music?
No. The motion is generated in code and does not read audio. It only looks like an audio visual.
Preview and customize in the browser. Exports require membership.