A burning sun 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 ball is a crust of rock plates split by flowing magma cracks, on a sphere that slowly turns. The pointer is the light: the flames lean toward it and grow under it, the ball tilts to face it, nearby cracks open and burn hotter, and moving it drops ripples on the rim. The plates right under the pointer come unstuck and float above their sockets, showing a cold core underneath; when the pointer moves on they settle back and the seams cool to orange magma. Sun size, flame height, embers, ripples, the background and the core 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 sun 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