A burning eclipse drawn live in WebGL: flame tongues ring a flat dark disc, and the fire leans toward the pointer and ripples where it moves.
About this tool
A burning eclipse rendered in real time with one WebGL shader and no library. Flame tongues burn all the way round a torn, rippling rim, with heat haze, a white-hot rim line, a soft bloom and embers drifting up into the dark. Inside the rim there is nothing: a flat dark disc covers the sun right up to a thin molten lip, and it stays dark whatever the pointer does. The pointer works on the fire: the flames lean toward it and grow under it, the rim is pulled out and flares where it passes, and moving it drops ripples on the rim; scrolling over it makes the fire roar. Eclipse size, flame height, embers, ripples, the background and the disc colour are editable, along with speed, pause and pointer response. The engineering holds up in a real page: the render resolution adapts when frames run long, rendering pauses when the eclipse is off screen or the tab is hidden, reduced motion holds a still frame, and browsers without WebGL get a plain message instead of a broken canvas. The export is one HTML file, or a Svelte or React component.
In collections: Animated Orbs: AI, Siri & Voice Orb Animations
Guide: Free React WebGL Components You Can Install With the shadcn CLI
UI/UX · HTML / CSS / JS · All tools
Free React component of this preset · Drops License