Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/cosmic-developer/llms.txt
Use this file to discover all available pages before exploring further.
StarfieldBackground is the foundation of the Cosmic Developer portfolio’s visual atmosphere. It paints a living, breathing starfield directly onto an HTML <canvas> element, filling the entire viewport with hundreds of procedurally placed stars that slowly drift and twinkle — all without touching the DOM beyond a single canvas node.
Usage
Drop<StarfieldBackground /> once inside your app shell, before any navigational or content elements. It is self-contained and requires no props.
AuroraBackground so that both background layers are always present regardless of which route is active.
How It Works
Canvas mount & resize
On mount,
useEffect grabs the <canvas> ref and calls a resize handler that sets canvas.width and canvas.height to window.innerWidth / window.innerHeight. A resize event listener keeps these dimensions in sync whenever the browser window changes size.Star generation
After every resize, the star array is rebuilt. Star count is calculated as:Each star object carries:
| Property | Range | Purpose |
|---|---|---|
x, y | 0 → viewport width/height | Position |
radius | 0 → 1.5 px | Size |
vx, vy | ±0.05 px/frame | Drift velocity |
alpha | 0 → 1 | Current opacity |
dAlpha | ±0.01 /frame | Twinkle speed |
Radial gradient background
Each frame, the canvas is cleared and filled with a radial gradient —
#0a1535 (cosmic navy) at the center blending out to #04050d (near-black) at the edges — giving the illusion of depth even before any stars are drawn.Twinkle animation via requestAnimationFrame
The draw loop runs inside a
requestAnimationFrame callback. On each tick:- Every star’s
x/yadvances by its velocity. Stars that drift off one edge wrap to the opposite edge. alphasteps bydAlpha. Whenalphadrops below0.1or rises above1.0,dAlphais negated, creating a smooth ping-pong twinkle.- Each star is rendered as a filled arc (
rgba(245, 251, 255, alpha)).
let o and cancelled in the useEffect cleanup to prevent ghost loops on unmount.Positioning & Layering
The canvas element carries the following Tailwind classes:| Class | Effect |
|---|---|
fixed inset-0 | Anchors the canvas to the viewport, not the document scroll |
w-full h-full | Fills the entire viewport |
-z-20 | Sits below AuroraBackground (-z-10) and all page content |
pointer-events-none | Lets clicks and hovers pass straight through to content |
Because the canvas uses
position: fixed rather than position: absolute, it stays locked to the viewport during scroll — the stars never move with the page content.Customization
All tunable values live inStarfieldBackground.js. No props are exposed by design; edit the source constants directly:
Star Density
Adjust the divisor in
Math.floor(width * height / 2000). A smaller divisor (e.g. 1000) produces more stars; a larger one (e.g. 4000) thins them out.Star Size
Math.random() * 1.5 controls max radius in pixels. Increase the multiplier for larger, more nebula-like points of light.Drift Speed
(Math.random() - 0.5) * 0.1 sets the velocity range (±0.05 px/frame). Raise the outer multiplier for faster parallax drift.Twinkle Speed
(Math.random() - 0.5) * 0.02 controls the dAlpha step applied per frame, producing a ±0.01 oscillation range. Increase the multiplier for a livelier twinkle; decrease it for a calmer, barely-breathing effect.