The Starfield effect renders a live field of points streaming past the camera on a black background, growing larger and accelerating as they close in — the classic flying-through-space look rebuilt in WebGL rather than played back as a clip. It's built to sit on an idle screen and hold attention without asking anything of the viewer.
Before you start
- A browser with WebGL and graphics acceleration enabled. This effect draws every star as a live 3D point each frame; if hardware acceleration is off, the canvas can stay blank.
- A dim or dark room, or at least a dark surrounding desktop. The field renders on black, so it reads best without competing bright light nearby.
Set it up
- Open the Starfield effect.
- Set Star Count first — it decides how dense the field looks before anything else matters.
- Set Speed for how fast you want to feel like you're moving.
- Adjust Star Size, Trail Length, Warp Factor, and Brightness to taste, and pick a color from the swatch if you don't want white stars.
- Select Go Fullscreen.
You'll know it worked when points stream steadily out from the center of the screen, each one growing larger and appearing to accelerate as it nears you, then reappearing at the far edge once it passes you.
To leave fullscreen, press Escape or move your mouse and select Exit Fullscreen.
What each control does
| Control | Range | Default | What it changes |
|---|---|---|---|
| Speed | 1–200 | 50 | How fast stars travel toward you. Higher values move the whole field faster; low values give a slow drift. |
| Star Count | 100–2000 | 1000 | How many points make up the field. More stars means a denser, busier sky; fewer gives a sparser, calmer look. |
| Star Size | 10–200 | 50 | The size of each point on screen. Larger stars read as closer or brighter; smaller stars look distant and fine. |
| Trail Length | 0–100 | 80 | How opaque the stars are. Low values fade them toward transparent for a wispy, faint field; near 100 makes every star fully solid and sharp. |
| Warp Factor | 0–100 | 50 | Extra acceleration stars get as they close in on the camera. At 0, stars move at a steady speed the whole way; higher values add a burst of speed on top of that during the final stretch before a star passes you, for a sharper hyperspace-jump feel. |
| Color | swatch, default white | white (#ffffff) | Tints every star. Pick anything from the swatch — the whole field renders in that single color. |
| Brightness | 10–100 | 80 | Overall opacity of the field, layered on top of Trail Length. Lower it to fade the whole sky toward transparent; raise it toward 100 to keep stars as solid as Trail Length allows. |
Common setups
- Calm background for focus work. Speed 15–25, Star Count 500–700, Trail Length 50–60. Slow and sparse, easy to keep in peripheral vision without distraction.
- Classic hyperspace jump. Speed 100–150, Star Count 1000–1500, Trail Length 90–100, Warp Factor 70–100. High Speed sets the base pace; a high Warp Factor adds the extra burst of acceleration each star gets right before it streaks past you.
- Dense, immersive field. Star Count 1800–2000, Star Size 60–80, Trail Length 90–100. Every star solid and visible for a fuller sky, best on hardware that can keep up with the extra points.
- Subtle idle second monitor. Speed 10–20, Star Count 300–500, Star Size 20–30, Trail Length 40–50. Small, faint, and slow enough to sit unobtrusively next to your main screen.
Troubleshooting
The screen stays black and no stars appear. Graphics acceleration is most likely switched off in your browser. Turn it on in your browser's settings and reload the effect. If that isn't an option, try a non-WebGL effect like Full Screen Light instead.
The animation stutters or drops frames. Star Count sets how many points get repositioned every single frame, so a high count on a slower machine or integrated graphics can outrun the hardware. Lower Star Count first — it has the biggest effect on performance — before touching anything else.
Stars look faint or almost invisible. Trail Length and Brightness both lower star opacity toward transparent, and they stack — a low value on either one is enough to wash the field out. Raise both toward 100 for fully solid stars, and check the color swatch isn't set to something close to black against the black background.
A star seems to vanish and reappear somewhere else. That's expected. Each star resets to a random position at the far edge once it passes the camera, so individual stars will appear to jump rather than fade out smoothly.
The effect takes a moment to appear the first time you open it. The Starfield renderer loads on demand rather than up front, so there can be a brief delay before the canvas draws on a fresh page load or first switch to this effect. It only happens once per visit.
Next steps
For another WebGL screensaver built the same way, try 3D Pipes — colorful tubes growing through space instead of stars streaming past.