Skip to main content

Documentation Index

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

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

FogLayer is a purely atmospheric component — it exists to set a mood. It renders several large, blurred, semi-transparent panes across the entire viewport that drift languidly in looping Framer Motion animations, evoking the sensation of mist rolling through a darkened forest. The fog sits in its own stacking layer above the site’s background but below all interactive content, so visitors experience the ambience without it ever obscuring text or clickable elements. Like the other global effects in Web Weaver, it runs continuously and silently from the moment the app mounts.

​
Visual behaviour

FogLayer renders multiple motion.div elements, each styled as a large semi-transparent patch of fog:
  • Shape & colour — Each pane is a rounded rectangle (or freeform blob via border-radius) filled with a very low-opacity white or pale grey. The combination of several overlapping panes creates the illusion of depth and volume.
  • Blur — A CSS filter: blur(...) value softens each pane’s edges so no hard boundaries are visible, giving the fog an organic, gaseous appearance.
  • Drift animation — Every pane has a looping animate prop in Framer Motion that slowly shifts its x and y position, scales it subtly, and varies its opacity. Each pane uses a different duration and delay, so the movement never appears synchronised or mechanical.
  • Coverage — The component uses position: fixed with inset: 0 (top/right/bottom/left all zero), ensuring the fog covers the full viewport regardless of scroll position or page height.

​
Where it’s used

FogLayer is mounted once inside the Layout component, alongside EmberCursor and BlackCat. It is never imported or rendered inside individual page components. 
// Inside Layout — no other import needed
import FogLayer from "./FogLayer";

function Layout() {
  return (
    <>
      <EmberCursor />
      <FogLayer />
      <BlackCat />
      {/* header, nav, Outlet... */}
    </>
  );
}

​
Props

FogLayer accepts no props. All pane count, opacity, blur intensity, animation timing, and z-index values are encapsulated in the module.
FogLayer is intentionally zero-configuration. If you find the fog too dense or too subtle for a customised deployment, adjust the opacity and filter: blur() values directly in the source module.

​
Implementation notes

Fixed positioning

Every fog pane uses position: fixed so the layer stays anchored to the viewport during scroll. This is essential — a position: absolute approach would cause the fog to scroll away with the page content.

z-index layering

The FogLayer wrapper uses a z-index value that places it above the site background/texture but below the main content container, the navigation bar, BlackCat, and EmberCursor. This precise stacking is what makes the fog feel embedded in the scene rather than painted on top.

pointer-events: none

All elements inside FogLayer have pointer-events: none. Without this, the large fixed panes would swallow every click, hover, and scroll event on the page.

Looping Framer Motion animations

Each pane’s animate prop targets a different end-state x, y, and scale, with transition.repeat: Infinity and transition.repeatType: "mirror". The mirror repeat type causes each pane to reverse back to its origin smoothly, avoiding any jarring jump-cut at the loop boundary.

​
Performance considerations

Because FogLayer renders several large blurred elements that animate continuously, it is worth being aware of the following:
  • GPU compositing — Framer Motion’s motion.div elements are translated using CSS transform, which keeps animations on the GPU compositor thread and avoids layout thrashing.
  • will-change — The component may apply will-change: transform, opacity to each pane to hint to the browser that these properties will animate, allowing it to allocate a dedicated compositing layer upfront.
  • Reduced-motion — If you need to respect the prefers-reduced-motion media query (for accessibility), wrap the animation props in a check and fall back to a static, fully opaque fog pane.
To honour user accessibility preferences, use Framer Motion’s useReducedMotion() hook inside FogLayer and set all animation durations to 0 when it returns true. The fog will still render but won’t move.

​
Customisation tips

Fog density — Increase the number of motion.div panes to make the fog feel heavier and more oppressive. Decrease it for a lighter, more airy mist. Three to six panes is the typical sweet spot.
Colour tinting — Swapping the fill colour from near-white to a pale violet or deep teal gives the fog a more supernatural hue that can complement different accent colours elsewhere in the theme.

​
Full usage example

import FogLayer from "./components/FogLayer";

// Render once at the root — it self-manages all positioning and animation
<FogLayer />

Build docs developers (and LLMs) love

Get started for freeTalk to us