← All effects

Starfield Warp

Background Vanilla JS · zero dependencies Kit: Cinematic Dark — soon
-- fps
prefers-reduced-motion detected — stars frozen on one frame

X-ray · layers

dots flying toward you
motion trails behind stars
brightness flickers

Parameters

Stars300
Speed1.0
Streak length0.50
Twinkle0.30
your version · updates as you tinker

How this effect works

Every star has three numbers: x, y, z — where z is how far away it is. Each frame, z shrinks (the star flies toward you), and the screen position is simply x / z: divide by distance and you get perspective for free. That one division is the entire 3D engine. When a star gets too close, it respawns far away — an endless field from a fixed number of dots.

The warp streaks layer draws a line from where the star was a moment ago to where it is now — the closer the star, the faster it moves across the screen, so the streaks stretch automatically at the edges. The twinkle layer wobbles each star's brightness on its own random clock, which keeps the field alive even at slow speeds.

Production notes: respects prefers-reduced-motion (renders one static frame) · cost is linear in star count — 300 is comfortable everywhere, 800 is for desktops · looks best full-bleed behind a dark hero section · the copied snippet is self-contained HTML + JS.