Constellation — an interactive star field in WebGL
A living star field with no dependencies and no build step: star-points drift slowly, close pairs join into glowing threads, and the cursor behaves like a warm hand — links near it flare up while the nearest stars gently step aside.
- Period
- 2026
Key project figures
- widget size, 12 KB gzipped
- 39 KB
- dependencies and build steps
- 0
- stars per 100×100 px square — the density stays the same on any screen
- 8
Scope of work on the project
Services
- WebGL with no dependencies
- Star field with connecting threads
- Cursor response
- Optimization for mobile
About the project
An interactive background for a website usually means "engine plus model plus megabytes". Here the goal was the opposite: an effect that looks expensive but weighs like an image, drops into any page in one line, and needs neither a build step nor libraries.
The project in detail
The work
- the field is rendered by a pair of shaders in WebGL — no three.js, no model files;
- stars drift along their own paths and twinkle with different phases, so the motion never feels mechanical;
- links are computed on the CPU by a distance threshold: there are only a couple of hundred pairs per frame, cheap even on a phone;
- the cursor acts as a warm hand: threads near it flare up and the closest stars step aside smoothly;
- performance guards: caps on devicePixelRatio and buffer area, rendering paused off-screen, and the system "reduce motion" setting respected.
The result
A single 37 KB file, 12 KB compressed, with zero dependencies and zero build steps. The live field at the top of this page is that very file — the same code you can drop into any site.
Have products you need visualized?
The average project budget starts from €500.
Smaller standalone tasks are quoted individually.