nextjs-nights-shader

This is a visual effects component for Next.js websites, originally made as the background for a Next.js conference landing page and released as a standalone piece you can drop into any Next.js project. It renders an animated, interactive Milky Way galaxy scene in the background of a web page.

The effect renders roughly 146,000 stars in a simulated sky, with two concentrated bands forming a Milky Way streak and a sparse field filling the rest. Each star twinkles at its own rhythm. When you move your cursor across the page, a ripple of brightness spreads through the nearby stars, reacting fluidly to movement. A bloom filter makes bright regions glow softly into their surroundings, and a dithering step gives the starfield a deliberately granular look.

The component can also mask in a logo: you provide an SVG, the component converts it to a texture, and the galaxy brightens in the shape of the logo with an outline highlight. The logo position is read from a placeholder element in your page layout, so moving the placeholder moves the reveal in the shader automatically.

The underlying technology is WebGPU, a newer browser graphics API that gives web pages direct access to the GPU. Rendering is handled through Three.js using its node-based shader language, which avoids the need to write raw shader code. Because WebGPU is required, the component only works in Chrome or Edge version 113 and later, or Safari 18 and later. There is no fallback for older browsers.

A debug panel is available by adding ?debug to the URL, exposing live controls for every visual parameter including bloom intensity, dithering, star density, hover fluid behavior, and camera settings.