Star Parallax
Size, brightness and colour all read off one depth, so the field reads as distance rather than as assorted dots.
The scene in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
"use client";
import * as React from "react";
import * as THREE from "three";
/**
* Star Parallax — one number decides everything about a star.
*About this effect
For a sign-in screen, a splash, or the top of a marketing page — and it is the safest of these backdrops to put text on, because most of the frame is empty by construction. A field of dots whose size, brightness and speed were each picked separately looks like a field of dots. The same field with all three read off a single depth reads as distance, and the difference is not subtle: distance is the only thing the eye is being offered here, and it either arrives whole or not at all. One large dim star drifting quickly is not a star at any distance, and one of those in the frame is enough to flatten the rest. So a star in this file is a position and nothing else. Depth comes from where it is, the point size falls off with depth, the brightness falls off faster because that is what an inverse square does, the colour moves towards the sky's own — the same aerial perspective that makes distant hills blue — and the drift is that depth again. There is no per-star size, brightness or speed to fall out of step, because none of them exist. Stars that pass the camera are sent to the back of the field, so the near ones are always the ones that were far a moment ago and a finite field stays endless.
Related effects
- Swell SurfacePoints moved in circles rather than up and down, so crests peak and troughs flatten without either being shaped.
- Lattice NetEdges recomputed from distance every frame with nothing created or destroyed, so the mesh thickens where nodes gather.
- Aurora CurtainRays that arrive where a sampled sheet folds end-on, so no line of code decides where a ray belongs.