Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/fortune-seeker/llms.txt

Use this file to discover all available pages before exploring further.

Starfield is a full-viewport HTML5 canvas component that fills the background of every page in Fortune Seeker with a living night sky. Stars drift slowly across the canvas, twinkle by varying their opacity, and connect to nearby neighbors with faint gossamer lines — suggesting a constellation map. The canvas is fixed to the viewport, sits behind all content at z-index: -1, and automatically resizes when the browser window dimensions change. It accepts no props and runs entirely through canvas 2D API calls inside a useEffect.

​
Props

This component accepts no props. Star density, velocity, radius, opacity, and connection distance are all computed automatically from the viewport dimensions.

​
Usage Example

import Starfield from "@/components/Starfield";

// Standalone usage — place anywhere that needs a star background
export default function HeroSection() {
  return (
    <div className="relative min-h-screen">
      <Starfield />
      <div className="relative z-10">
        <h1>Fortune Seeker</h1>
      </div>
    </div>
  );
}
Starfield is already composed into Layout, which wraps every page. You do not need to add it manually unless you are building a completely custom shell outside of Layout.

​
Behavior & Animation

​
Star Generation

On mount (and on every resize event), the canvas is sized to window.innerWidth × window.innerHeight and a fresh array of star objects is generated. The star count is derived from viewport area: Math.floor(width × height / 4000), so a 1920 × 1080 display produces roughly 518 stars. Each star is initialized with:
PropertyRange
x, yRandom within canvas bounds
radius0 – 1.5px
vx, vy−0.1 – +0.1 px/frame (slow drift)
alpha0 – 1 (random initial opacity)

​
Per-Frame Update

On every requestAnimationFrame tick:
  1. The canvas is cleared.
  2. A radial gradient is drawn over the full canvas — a subtle rgba(58,26,92,0.05) at the center fading to transparent — giving the sky a faint violet depth.
  3. Each star moves by its velocity vector. Stars that drift off one edge wrap around to the opposite edge seamlessly.
  4. Each star’s alpha is nudged by a random value in [−0.05, +0.05], clamped to [0.1, 1.0], producing a natural twinkle.
  5. Each star is drawn as a filled gold circle: rgba(201,169,110, alpha).
  6. Every pair of stars whose Euclidean distance is less than 100px is connected with a stroke at rgba(201,169,110, 0.05) and lineWidth: 0.5.

​
Cleanup

The component removes its resize event listener and cancels the pending requestAnimationFrame via the useEffect cleanup function when it unmounts, preventing memory leaks during navigation.

​
Rendering Context

The canvas is rendered with className="fixed inset-0 z-[-1] pointer-events-none opacity-60", ensuring:
  • It stays fixed during scroll.
  • It never intercepts mouse or touch events.
  • It renders at 60% opacity, blending with the dark midnight page background.
If you need a denser or sparser sky, adjust the divisor in the star-count formula. Lowering the divisor (e.g., 2000) increases star density; raising it (e.g., 8000) creates a sparser field. This change is made directly in Starfield.js.

Build docs developers (and LLMs) love

Get started for freeTalk to us