Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/magical/llms.txt
Use this file to discover all available pages before exploring further.
BackgroundEffects is the ambient visual layer of the Magical Portfolio. It renders a position: fixed, full-screen div sitting behind all page content at z-index: -1, giving every route a consistent, living backdrop without impacting layout or scroll behaviour.
This component accepts no props. Its particle layout — positions, sizes, durations, and delays — is randomised on mount using
useEffect, so each page load produces a unique arrangement.What It Renders
The component layers three distinct visual elements on top of a solidbg-mystic-950 base:
1. Noise Texture Overlay
An inline SVG<feTurbulence> filter with type="fractalNoise" is applied as a full-size overlay at 3% opacity. This adds a subtle grain to the background, breaking up the flatness of the dark base and giving the canvas an organic, hand-crafted feel.
2. Radial Gradient Glows
Two large, blurred radial gradient blobs add depth and colour to the canvas:| Glow | Position | Approximate size | Colour |
|---|---|---|---|
| Violet blob | Top-left | 50 vw | Mystic violet |
| Teal blob | Bottom-right | 60 vw | Mystic teal |
blur-filtered circles rendered as absolutely-positioned div elements inside the fixed container. They remain stationary and serve as the warm ambient light sources that particles drift through.
3. Floating Particles
40 individual particles are generated on mount and animated independently. Each particle is a small, circulardiv with the following randomised properties:
| Property | Range |
|---|---|
| X position | 0–100% of viewport width |
| Y position | 0–100% of viewport height |
| Size | 1–4 px (width & height) |
| Colour | bg-mystic-mint/40 |
| Animation duration | 10–30 seconds |
| Animation delay | 0–5 seconds |
Z-Index Positioning
The root container usesz-[-1], placing the entire background layer beneath the React Router page tree. Individual elements within the component stack naturally without interfering with interactive UI above.
Performance Notes
- Particle data (positions, sizes, timing) is computed once inside a
useEffecton mount and stored in state, so no recalculation happens on re-renders. - All particle animations are CSS/Framer Motion keyframe loops — they run entirely on the compositor thread and do not trigger JavaScript on each frame.
- The noise texture is a lightweight inline SVG filter rather than an external image asset, keeping the initial load lean.
Usage
Add<BackgroundEffects /> once near the root of your component tree, outside the main content wrapper so it spans the full viewport: