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.

Spooky is compiled by Vite targeting modern browsers with ES2020+ support. Every HTML entry file loads the React application via <script type="module" src="./assets/main.js">, which uses native ES module loading. The theme also relies on CSS custom properties for its color palette and on the Web Animations API (through Framer Motion) for page transitions and decorative effects. No polyfills or server-side rendering are included — the theme is a fully client-side SPA.
Before launching your personalized site, test on a real iOS device or via a service like BrowserStack to catch Safari-specific rendering differences, particularly around backdrop-filter, mix-blend-mode, and CSS filter in Framer Motion transitions.

Supported browsers

BrowserMinimum VersionNotes
Chrome80+Full support
Firefox75+Full support
Safari14+Full support
Edge80+Full support
Mobile Chrome80+Cursor hidden on touch (expected)
Mobile Safari14+Cursor hidden on touch (expected)
Internet ExplorerNot supportedRequires ES modules

ES module loading

Each HTML entry file loads the app with:
<script type="module" src="./assets/main.js"></script>
type="module" enables native ES module loading, which is supported in all evergreen browsers. Browsers that do not support ES modules — primarily Internet Explorer 11 and some older mobile browsers — will silently ignore the script tag and render a blank page with no error. To handle these cases gracefully, add a <noscript> message or a <script nomodule> fallback:
<noscript>
  <p>Please use a modern browser to view this site.</p>
</noscript>

CSS custom properties

The Spooky color palette is defined using CSS custom properties in assets/main.css. All five core variables are referenced throughout the compiled component output:
VariableValueUse
--color-charcoal#1A1A1DPage background
--color-pumpkin#FF7518Accents, active states
--color-ghost#F5F5F5Primary text
--color-bat#4A1A5CBorders, secondary accents
--color-candy#FCD34DCandle/lantern glow
CSS custom properties are supported in all modern browsers listed above and are not supported in IE11. If IE11 support is required, each custom property reference would need to be replaced with its hard-coded fallback value.

Framer Motion and animations

Framer Motion powers the page transition in Layout.js, the spring animation on the navigation drawer, the lantern swing, the spider drop, and the candle cursor. Framer Motion uses the Web Animations API where available and falls back to requestAnimationFrame in browsers where the WAAPI is not fully implemented. The filter: brightness() CSS property used in the Layout page transition (initial: { filter: 'brightness(0)' }, animate: { filter: 'brightness(1)' }) is supported in all listed browsers. The mix-blend-mode: screen CSS property used by CandleCursor to blend the candle flame with the page background is supported in all modern browsers. In Safari, verify this renders correctly — Safari has historically had minor differences in blend mode compositing.

Mobile behavior

On touch devices, the theme adapts as follows:
  • CandleCursor returns null on touch devices. Because mousemove events are not fired on touchscreens, the cursor component does not mount. Visitors on mobile see the native touch indicator, which is the correct and expected behavior.
  • The navigation drawer is the primary navigation mechanism on all screen sizes. The hamburger button and slide-in drawer are designed for both desktop and mobile viewports.
  • Tailwind breakpoint utilities (sm:, md:, lg:) are used throughout the component styles to adjust layout, spacing, and typography at different screen widths.
  • Touch targets — verify that interactive elements (nav links, the jump-scare toggle, the close button) meet the minimum recommended touch target size of 44×44 px on mobile.

Build docs developers (and LLMs) love