Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/spooky/llms.txt
Use this file to discover all available pages before exploring further.
CobwebCorner is a purely decorative component that renders an inline SVG cobweb pinned to a corner of the page using absolute positioning. It accepts a position prop that controls which corner it occupies, so multiple instances can be placed in different corners simultaneously.
Placement
EachCobwebCorner instance is an absolute-positioned div measuring w-32 h-32 (8 rem × 8 rem). The correct corner is selected via the position prop:
position value | Tailwind classes applied | Transform |
|---|---|---|
"top-left" (default) | top-0 left-0 origin-top-left | none |
"top-right" | top-0 right-0 origin-top-right | scale-x-[-1] (horizontal flip) |
"bottom-left" | bottom-0 left-0 origin-bottom-left | scale-y-[-1] (vertical flip) |
"bottom-right" | bottom-0 right-0 origin-bottom-right | scale-x-[-1] scale-y-[-1] (both axes) |
z-20, placing it above the page background and FlickeringLights (z-10) but below interactive UI elements (z-40 and above). This layering ensures the cobwebs are always visible as decorations without ever blocking clicks or text selection.
The SVG uses viewBox="0 0 100 100" with preserveAspectRatio defaulting to uniform scaling, so the cobweb fills the container proportionally at any size.
Hover interaction
CobwebCorner is subtly interactive. The container listens for mouseenter and mouseleave events — when the user hovers over a corner, a Framer Motion spring animation gently scales the cobweb up to 1.05× and rotates it 2°, giving it a slight rustle. The spring uses stiffness: 300 and damping: 15 for a soft, organic response.
The container carries pointer-events-auto specifically to enable this hover effect, even though other decorative components use pointer-events-none.
SVG structure
The cobweb is drawn entirely with SVG<path> elements using currentColor for the stroke (inheriting the Tailwind text-gray-400 class set on the <svg>), with opacity-30 applied to the <svg> itself for a ghostly translucency. The web is composed of:
- Five radial spokes — straight lines from the origin
(0, 0)fanning out toward(100, 100),(100, 50),(50, 100),(100, 20), and(20, 100) - Five concentric arc strands — quadratic Bézier curves arcing from one axis to the other, at increasing radii:
Q20,20,Q40,40,Q60,60,Q80,80, andQ100,100
strokeWidth="1" and fill="none".
Accessibility
The cobweb SVGs are purely decorative and carry no meaningful content for assistive technology users. If you fork and rebuild the component, ensure the<svg> element includes aria-hidden="true" so screen readers skip it entirely:
Customizing cobwebs
- Opacity — the
<svg>is rendered atopacity-30by default. Replace this with any Tailwind opacity utility (e.g.opacity-10for barely visible,opacity-60for more prominent) by modifying the source. - Color — the SVG inherits color from
text-gray-400. Change this Tailwind class to any text-color utility, or set an explicitstrokeattribute on the paths. - Removing specific corners — if you only want cobwebs in some corners, simply remove the
CobwebCornerinstances for the corners you don’t need from wherever they are rendered in your layout. - Size — the container is
w-32 h-32. Increase these values for larger, more prominent cobwebs.
CobwebCorner is mounted inside Layout (or as a page-level decoration) and is always active on every page. It requires no configuration and accepts only the optional position prop.