← All effects

Galaxy Spiral

BackgroundWebGL · zero dependenciesthe shader IS the code
-- fps
prefers-reduced-motion detected — the galaxy is shown frozen

X-ray · layers

the logarithmic spiral arms winding out of the core
a twinkling star field, denser along the arms
the hot glowing bulge at the centre

Parameters

Spin0.50
Arms4
Density1.0
Glow0.80
your version · updates as you tinker

How this effect works

This runs on the GPU. A single fragment shader is executed once for every pixel, in parallel, and returns a colour. For each pixel it converts its position to polar coordinates — a radius r from the centre and an angle a. A spiral is just a rule that ties the two together: a logarithmic spiral is where the angle drifts by the logarithm of the radius, which is exactly the shape real galaxy arms take.

The arms come from cos(arms · (a − log r + time)) — the time term slowly winds the whole pattern. Turn the Arms layer off and only the star field and core remain, which shows how much structure that one line carries. Stars scatters a hashed twinkle across the field, brighter where the arms pass; Core adds the hot central bulge. This is the shader-tier promise: a galaxy you can take apart — every slider is one uniform, and the Full-code tab is the real GLSL.

Production notes: respects prefers-reduced-motion (one static frame) · falls back to a CSS gradient where WebGL is unavailable · one draw call per frame, device-pixel-ratio capped for battery · the shader is fixed and ours; only numeric uniforms are tunable — never code from a visitor · the copied snippet is self-contained HTML + GLSL + JS.