Eclipse Ring

About Eclipse Ring

A total solar eclipse for your hero, drawn live in WebGL. A corona of streamers drifts and shimmers round a black moon, stars flicker behind it, and the diamond ring — the bead of light that flares on the rim — follows the cursor round the edge. Switch it to Scroll and the moon crosses the sun as the section passes: the diamond, totality, then the crescent. Your headline, text and button sit on top, centred under the ring or beside it.

Features

• A real-time total eclipse in WebGL: corona streamers, a starfield and a black moon.

• The diamond ring follows the cursor round the rim, with a damped, gliding follow.

• Scroll mode: the moon crosses the sun as the section passes, holding at totality.

• Auto mode walks the light round the ring by itself; Still holds totality.

• Eyebrow, title, subtitle and a button on top, centred or beside the ring.

• Corona, outer glow, diamond and moon colours, plus intensity, size and streamers.

• Ring size and position, automatic or custom.

• Stacks on portrait phones; touch screens get the Auto walk.

• Reduced motion, a CSS frame in Framer's canvas and a no-WebGL fallback.

• One standalone React + TypeScript file, 29 property controls.

Created by LUNAUT Studio.