Halftone Orbit is an animated WebGL ring drawn as a printed halftone screen, with gentle waves travelling around it on a transparent background. Use it as a badge-like focal element, a loading state or a light hero accent. Size, ring radius and ring width shape the orbit; dot density and screen angle set the halftone; wave amplitude controls how much the ring breathes; print grain and exposure set the printed tone. Speed, timeline offset and the graphite-to-silver palette are editable, and the code exports use the same original renderer.
How this shader works
Halftone Orbit draws a ring as a printed halftone screen, with gentle waves travelling around it on a transparent background. It works as a badge-like focal element, a loading state or a light hero accent. Ring radius and Ring width shape the orbit, Dot density and Screen angle set the halftone, and Wave amplitude controls how much the ring breathes.
Tips
- Ring radius and Ring width set the shape. A thin, wide ring reads as a halo.
- Dot density sets the number of halftone dots. Lower values give a bold print.
- Wave amplitude controls how much the ring moves. Lower it for a steady badge.
- Speed is set high here. Lower it for a calm loading state.
Questions
How do I make an animated halftone ring or loader?
Open Halftone Orbit, set Ring radius and Ring width, then adjust Speed and Wave amplitude. Export it as a React or Svelte component or an HTML file and place it where you need the loader.
Does it have a background?
No. In the HTML, React and Svelte exports the ring is drawn on a transparent background, so it sits on top of whatever is behind it. An MP4 video export is opaque.
Preview and customize in the browser. Exports require membership.