About 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.
