Skip to main content

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.

JumpScareSpider is an opt-in interactive Halloween effect — a spider that occasionally drops from the top of the screen into the viewport. The component reads from JumpScareContext to check whether the feature is currently enabled by the user, and only fires when the user has explicitly opted in. It is designed to delight visitors who want the full spooky experience while staying completely inert for those who prefer a calmer environment.
Jump-scare effects may be distressing to some users. The toggle button is present specifically to give users control over this animation, but if your audience is sensitive to sudden movements or animations, consider removing the JumpScareSpider component entirely before publishing.

​
Jump-scare system

The spider effect is built from three cooperating parts:
  1. JumpScareContext (assets/JumpScareContext.js) — A React Context that holds a boolean scaresEnabled state and a toggleScares function. The provider also tracks an interactionCount integer that increments as the user interacts with the page. The enabled state is persisted to localStorage under the key spooky-scares-enabled, so the user’s preference is remembered across page loads.
  2. JumpScareToggle — A button component rendered in the bottom-right corner of every page. Clicking it calls toggleScares() on the context, flipping scaresEnabled between true and false. When scares are on, the button displays the Ghost icon in pumpkin orange; when off, it shows the Eye Off icon in gray.
  3. JumpScareSpider — The animation component itself. It reads scaresEnabled and interactionCount from context and only triggers once scaresEnabled is true and interactionCount has reached at least 3. Once triggered, the spider drops into view using a Framer Motion spring animation, sways gently, then retracts after 3 seconds. A hasTriggered guard prevents the spider from dropping more than once per page session.

​
User control

The jump-scare spider is fully user-controlled. The JumpScareToggle button is always visible in the UI at the bottom-right of every page, so visitors can disable the effect at any moment. The button’s aria-label updates dynamically — "Disable jump scares" when active and "Enable jump scares" when inactive — so screen reader users can also identify and operate the control. Because the spider requires interactionCount >= 3 before it fires, it will not trigger immediately on page load, even when scares are enabled. This adds a moment of natural delay rather than surprising visitors the instant they arrive.

​
Disabling the spider entirely

To remove the spider from the theme completely when rebuilding from source:
  1. Open components/Layout.js and remove the <JumpScareSpider /> JSX element and its import.
  2. Optionally, remove the <JumpScareToggle /> element and its import from Layout.js as well — the toggle has no function without the spider.
  3. Remove assets/JumpScareContext.js and its provider wrapper from the app entry point.
After these changes, no spider-related code will ship in the compiled output.

Build docs developers (and LLMs) love

Get started for freeTalk to us