Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/spooky-developer/llms.txt
Use this file to discover all available pages before exploring further.
Background is the visual foundation of every page in the Spooky Developer portfolio. It sits at z-index: -1, permanently behind all other content, and produces the immersive Halloween atmosphere through several layered effects: a deep dark teal canvas, a field of 100 softly twinkling star-like particles, a blurred glow orb in the top-right corner, and — when haunt mode is active — two bat silhouettes that drift diagonally across the screen on infinite loops.
What it renders
Base canvas
The outermostdiv uses fixed inset-0 z-[-1] overflow-hidden pointer-events-none bg-haunt-bg. Breaking that down:
| Class | Purpose |
|---|---|
fixed inset-0 | Covers the entire viewport and stays in place while the page scrolls |
z-[-1] | Places the layer behind every other element on the page |
overflow-hidden | Clips drifting bats and particles at the viewport edge |
pointer-events-none | Ensures the background never intercepts mouse events |
bg-haunt-bg | Fills the canvas with the haunt-bg colour token (#0d2e35) |
Background uses position: fixed, not position: absolute. This means it does not scroll with the page — it always fills the full browser viewport regardless of how far the user has scrolled. The page content scrolls over it.Twinkling particle field
On mount, the component generates an array of 100 particle objects, each with randomisedx, y, size (1–3 px), animation duration (2–5 s), and delay (0–2 s). Each particle is a rounded-full bg-haunt-bone motion.div that loops an opacity keyframe animation [0.2 → 1 → 0.2] using Framer Motion, creating a convincing star-twinkle effect without any Canvas or WebGL overhead.
Glow orb
A singlew-64 h-64 bg-haunt-moon/10 rounded-full blur-[100px] div positioned top-10 right-20 adds a soft teal ambient glow in the upper-right quadrant. It does not animate — it serves as a subtle depth cue that makes the background feel three-dimensional.
Drifting bats (haunt mode only)
WhenisHaunted is true (read from useHaunt()), two motion.div wrappers containing the BatIcon SVG drift across the screen:
- Bat 1 starts off-screen left and travels to the right at
x: -100 → 100vw, also rising from bottom to top (y: 100vh → -100), completing one pass every 15 seconds on an infinite loop. - Bat 2 mirrors the journey in reverse (right to left) at
y: 80vh → -100, completing a pass every 20 seconds with a 5-second initial delay. It is also rendered with a horizontal flip (scaleX(-1)) so it faces the direction of travel.
text-haunt-dark/50 and text-haunt-dark/40) so they read as atmospheric rather than distracting.
Customisation
Changing the background colour
The base colour is controlled by thehaunt-bg Tailwind colour token. To change it, update the token value in your Tailwind config:
bg-haunt-bg across the project — including the <header> gradient and <Footer> background — will update automatically.
Adjusting particle density
The particle count is set by theArray.from({ length: 100 }) call in the component. Increase or decrease the number to tune performance vs. visual richness. Each particle is a lightweight div with a CSS transition; 100 particles adds negligible rendering cost on modern hardware.
Disabling drifting bats without disabling haunt mode
The bats are gated behind a simpleisHaunted && conditional. If you want to remove the bats while keeping other scare effects active, delete the isHaunted && <Fragment>…</Fragment> block from Background.js.