A broadcast fight HUD built around a burning circular charge meter. One self-contained HTML
file. No build step, no bundler, no framework, no npm install.
Live: https://sam1983aing.github.io/aura-break/
Click the live link. Nothing to install.
https://sam1983aing.github.io/aura-break/
You need a browser with WebGL, which is any Chrome, Edge, Safari or Firefox from the last several years.
Open index.html. That is the whole project. Markup at the top, CSS in one
<style> block, the GLSL fragment shader as a template string, and the JavaScript in one
<script type="module"> at the bottom. There is no second file and nothing hidden in a folder.
Step 1. Get the file. Either route works.
Without git, click the green Code button above, then Download ZIP, and unzip it.
With git:
git clone https://github.com/Sam1983Aing/aura-break.gitStep 2. Start a local server from inside the folder. Use whichever you already have.
Python, preinstalled on macOS and most Linux systems:
python3 -m http.server 8000Node, which fetches a tiny server on first run:
npx serveVS Code: install the Live Server extension, right-click index.html, then Open with Live
Server.
Step 3. Open the address the server prints, which for the Python command is http://localhost:8000/
Press Ctrl+C in the terminal to stop the server.
A double-click opens it as file:///... instead of http://..., and browsers apply much
stricter rules to that. This page uses ES modules, which those rules restrict, and the exact
behaviour differs between Chrome, Safari and Firefox. It might work for you, it might show a
black page with a CORS error in the console. A local server takes one command and always works.
Copy index.html wherever you want. There is nothing to install alongside it. Everything is
either inside the file or fetched from a CDN at runtime.
To make it work offline, or to keep it working regardless of what happens to those CDNs, download the imported libraries and change the import URLs at the bottom of the file to local paths.
Black page, nothing happens. Press F12, open the Console tab. A CORS or module error means you opened the file directly rather than through a local server. Go back to step 2.
HUD appears but no glowing ring. WebGL may be disabled. Check at https://get.webgl.org/
python3: command not found. Try python -m http.server 8000, or use npx serve.
git: command not found. Use the Download ZIP route, you don't need git.
The ring is not drawn geometry. It is a single full-screen GLSL fragment shader on one oversized triangle. No texture, no sprite, no particle system, no post-processing pass, no canvas 2D drawing.
The glow is a signed distance field, glowed three times. d = r - meterR is each pixel's
distance from the ring. Running that through exp(-abs(d) * k) at three different tightnesses
and summing the results fakes bloom with no post pass: k = 58 gives a razor-thin white core,
k = 24 a coloured mid-halo, k = 7.5 a wide soft bleed.
The smoke is fBm sampled in polar space. Five octaves of value noise with lacunarity 2.02, deliberately not 2.0, which would align the octaves and band. The important part is the sample coordinate: angle on one axis, radius on the other. That makes the noise swirl around the ring and rush inward rather than scrolling flat.
The ring burns because the noise feeds back into the distance field. The same noise is added
to d, so the circle itself deforms rather than just having fog near it, and the deformation
scales with charge so it thrashes harder as the meter fills.
The names are erased by light, not by a mask. The canvas sits above the giant fighter names
with mix-blend-mode: screen. Where the shader is near-black the names show through untouched.
Where the ring burns, the result is driven to white and the type is optically erased.
The shockwave is one decaying float. JavaScript sets uFlash = 1.0 at 100%, the render loop
multiplies it by 0.93 each frame, and the shader maps the surviving value onto a radius expanding
from the ring out to 2.3x.
The meter charges over 8 seconds, detonates, holds 1.4 seconds, then loops. Full cycle is 9.4 seconds.
The progress mask uses a ±0.004 smoothstep, which is nearly a hard edge running radially out
through the haze. You will see a faint seam at 12 o'clock. Widen it to ±0.06 and raise the
0.34 dim floor if you would rather not have it.
The smoke coordinate ang * 1.5 is not periodic across the atan wrap at ±π, so there is a
faint low-contrast crack along the 9 o'clock axis.
Everything loads from a CDN at runtime.
- OGL 1.0.11 for the WebGL layer
- GSAP 3.12.5 for the entrance only
- Iconify for one glyph
- Google Fonts: Archivo and Chakra Petch
MIT. See LICENSE.