OBJECTS FOR THE WEB / 031Eclipse Ring
Interaction
Corona
SCROLL THROUGH TOTALITYLEFT LAYOUT · SCROLL
AN ECLIPSE FOR YOUR HERO.The one moment
The one moment
everyone looks up.
A real-time total eclipse drawn in WebGL: a corona of streamers that drift and shimmer, a starfield, and the diamond ring — the bead of light that flares on the rim — following the cursor round the edge. Switch it to scroll and the moon crosses the sun as the section passes. Your headline, text and button sit on top; colours, sizes and layout are all controls.
Download the componentOne Code File. React and Framer only.
Touch, reduced motion, CSS fallback and canvas preview included.