LUNAUT STUDIOGet the component
OBJECTS FOR THE WEB / 031Eclipse Ring
TOTALITY · 2:41

Light at the edge
of the dark.

Move across the eclipse. The diamond of light follows you round the rim.

Begin
Interaction
Corona
SCROLL THROUGH TOTALITYLEFT LAYOUT · SCROLL
LAUNCH · 09:41 CET

It all goes dark.
Then this.

Scroll and the moon crosses the sun: first contact, totality, then the diamond as the light returns.

Join the launch
AN ECLIPSE FOR YOUR HERO.

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 component

One Code File. React and Framer only.
Touch, reduced motion, CSS fallback and canvas preview included.

LUNAUT STUDIOINDEPENDENT OBJECTS. DISTINCTIVE WEBSITES.ECLIPSE RING / 1.0

Create a free website with Framer, the website builder loved by startups, designers and agencies.