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.

BlackCat is one of Web Weaver’s most characterful ambient components. A silhouette of a black cat — rendered as an inline SVG — wanders into view from one side of the screen, settles at the bottom corner as if watching the visitor with feline indifference, and then slinks back into the shadows. The whole sequence loops, occasionally switching sides, giving the impression of a real cat living within the interface. Because it uses a very low z-index and pointer-events: none, it never interferes with navigation or content interaction. It is pure delight, delivered silently.

​
Visual behaviour

The cat’s life cycle has three phases, each driven by a Framer Motion keyframe animation:
PhaseDescription
EnterThe cat slides in from beyond the left or right viewport edge, moving along a natural arc toward the bottom corner.
SitThe cat holds its position at the corner for a few seconds. Subtle micro-animations (a slow tail flick or ear twitch) may play during this idle phase.
ExitThe cat walks back off-screen in the opposite direction it entered, disappearing behind the viewport edge. After a pause, the cycle repeats — sometimes from the same side, sometimes from the other.
The SVG is rendered at a fixed size appropriate for the corner of a desktop viewport, and the entire component uses position: fixed so it stays anchored to the bottom of the visible screen regardless of scroll depth.

​
Where it’s used

BlackCat is mounted once inside the Layout component. It requires no page-level imports. 
// Inside Layout
import BlackCat from "./BlackCat";

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

​
Props

BlackCat is fully self-contained and accepts no props. The animation sequence, timing, and SVG artwork are all internal to the module.
The component manages its own looping animation state internally. There is no external API to pause, reset, or re-trigger the cat’s walk cycle.

​
Implementation notes

Fixed viewport positioning

The root element uses position: fixed with bottom: 0 and either left: 0 or right: 0 depending on which corner the cat is currently occupying. This keeps the cat pinned to the bottom of the visible screen at all times.

Framer Motion keyframes

Positional movement is expressed as a Framer Motion keyframes array on the x property. The enter, sit, and exit positions are baked into the array, and a custom times array controls the pacing — slow drift in, a long idle pause, then a brisk exit.

z-index and pointer events

BlackCat uses a low z-index (typically 1 or 2) so it sits above the background and fog but below all page content, the navigation bar, and the ember cursor. pointer-events: none prevents the SVG from intercepting any mouse events.

Side switching

After each full enter→sit→exit cycle, the component updates an internal state value to pick the next corner. This randomised (or alternating) side selection prevents the animation from feeling repetitive.

​
Accessibility

Because BlackCat is a purely decorative element, its SVG should carry aria-hidden="true" to prevent screen readers from announcing it. The component handles this internally, so no extra accessibility attributes are needed at the usage site.

​
Customisation tips

Animation speed — The overall walk cycle duration is set in the Framer Motion transition.duration value. Increasing it produces a slower, more languid cat; decreasing it creates a more energetic, skittish creature.
Cat size — The SVG’s width and height attributes (or Tailwind size classes) control how large the cat appears. On smaller viewports you may want a reduced size so it doesn’t dominate the corner.
Idle frequency — If you want the cat to appear less often, increase the pause duration between animation cycles. For a more active presence, shorten the idle hold time so the cat wanders in and out more frequently.

​
Full usage example

import BlackCat from "./components/BlackCat";

// Render once at the root — self-animating, no props required
<BlackCat />

Build docs developers (and LLMs) love

Get started for freeTalk to us