Web Weaver’s interface is built from eleven hand-crafted React components, each contributing to the project’s dark mystical aesthetic. Some components are purely ambient — silently enriching the atmosphere with fog, embers, and wandering creatures — while others are interactive building blocks for portfolio content. This reference catalogs every component, what it does, and where to find its full documentation.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.
Layout
The application shell. Wraps the entire app in a HashRouter, renders the global ambient effects, provides the top navigation bar with hash links, and mounts page content via React Router’s
<Outlet />.EmberCursor
Replaces the default system cursor with a glowing teal ember trail. Powered by Framer Motion, it renders a radiant dot and trailing particles that follow every mouse movement across the viewport.
FogLayer
A full-viewport ambient fog overlay positioned between the background and page content. Multiple blurred, semi-transparent panes drift slowly using Framer Motion, lending the site a moody, atmospheric depth.
BlackCat
A decorative animated black-cat SVG that prowls the bottom corners of the viewport. The cat enters, sits for a moment, then disappears — all driven by Framer Motion positional keyframes.
Sigil
A static SVG mystical sigil used as a decorative illustration on the About page. Accepts a
className prop so Tailwind utility classes can control its size and placement.MoonPhase
An SVG moon-phase indicator that renders the current (or a given) lunar phase as a decorative graphic. Adds a celestial touch to headers and sidebars throughout the portfolio.
Candle
An animated candle SVG that supports both a lit and an unlit state. The flame flickers with subtle Framer Motion keyframes, making it a versatile ambient or interactive toggle element.
WaxSeal
A clickable wax-seal SVG button that reveals hidden content on press. Ideal for gating contact details, secret links, or surprise messages behind a satisfying stamp interaction.
TarotCard
A flip-card component used as blog post tiles. The front face displays atmospheric artwork; flipping the card reveals the post title, excerpt, and a read-more link — all animated with Framer Motion.
Cauldron
A bubbling cauldron SVG animation used as a thematic accent. Animated bubbles rise from the cauldron’s surface in a looping Framer Motion sequence, reinforcing the witchcraft visual language.
Familiar
An animal-avatar testimonial card. Each Familiar pairs a whimsical creature illustration with a client quote, name, and role, bringing personality and charm to the Testimonials section.
The first four components in the list — Layout, EmberCursor, FogLayer, and BlackCat — are mounted once at the application shell level and require no props. You will not import them into individual page components; they are always present for every visitor.