Build guide · Site 04 of 25

Ninety-five thousand points of light.

NEBULA DRIFT is one of 25 sites built by Formwork. The whole background is a single galaxy — a point cloud generated in the browser and turned slowly, forever.

The idea

An observatory's website should feel like looking up. So instead of a photo of a galaxy, the site is one — a spiral built from tens of thousands of individual particles, each coloured by how far it sits from the core, drifting at a sidereal crawl.

The stack

• 3D three.js (r160) loaded as an ES module via import-map — no bundler.
• Visual a THREE.Points cloud with additive blending.
• Motion GSAP for scroll reveals; requestAnimationFrame for rotation + camera parallax.
• Type Oswald (display), Space Grotesk (text), JetBrains Mono (coordinates).
• Host static files on GitHub Pages.

Signature technique: a procedural galaxy

Each particle picks a random radius, snaps to one of four spiral branches, twists by an angle proportional to its radius (the spin), then gets scattered by a power-curved random offset so the arms stay dense at the core and wispy at the edge:

const radius = Math.pow(Math.random(), 1.4) * R;
const branch = ((i % BRANCHES) / BRANCHES) * Math.PI * 2;
const spin   = radius * SPIN;
pos[i3]   = Math.cos(branch + spin) * radius + scatter();
pos[i3+2] = Math.sin(branch + spin) * radius + scatter();
color = insideColor.clone().lerp(outsideColor, radius / R);

Additive blending with depthWrite:false makes overlapping points sum toward white, so the dense core glows without any post-processing or bloom pass.

Details that matter

• Performance — 34k points on phones, 95k on desktop; devicePixelRatio capped at 1.5.
• Parallax — the camera eases toward the pointer, so the galaxy has real depth.
• Reduced motion — renders one still frame, no rotation, no parallax.
• Gradient text — the wordmark uses background-clip:text across cyan→violet.

Ship it on GitHub Pages

git init -b main && git add -A && git commit -m "ship"
gh repo create formwork-nebula --public --source=. --push
gh api --method POST /repos/OWNER/formwork-nebula/pages \
  -f 'source[branch]=main' -f 'source[path]=/'

The import-map + ES-module setup means three.js loads straight from a CDN with no build step — ideal for static hosting. Keep paths relative and add .nojekyll.

A few lines of trigonometry, one additive-blended material, and a slow rotation — that's an entire galaxy you can hold in a browser tab.