Spooky is compiled by Vite targeting modern browsers with ES2020+ support. Every HTML entry file loads the React application viaDocumentation 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.
<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.
Supported browsers
| Browser | Minimum Version | Notes |
|---|---|---|
| Chrome | 80+ | Full support |
| Firefox | 75+ | Full support |
| Safari | 14+ | Full support |
| Edge | 80+ | Full support |
| Mobile Chrome | 80+ | Cursor hidden on touch (expected) |
| Mobile Safari | 14+ | Cursor hidden on touch (expected) |
| Internet Explorer | Not supported | Requires ES modules |
ES module loading
Each HTML entry file loads the app with: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:
CSS custom properties
The Spooky color palette is defined using CSS custom properties inassets/main.css. All five core variables are referenced throughout the compiled component output:
| Variable | Value | Use |
|---|---|---|
--color-charcoal | #1A1A1D | Page background |
--color-pumpkin | #FF7518 | Accents, active states |
--color-ghost | #F5F5F5 | Primary text |
--color-bat | #4A1A5C | Borders, secondary accents |
--color-candy | #FCD34D | Candle/lantern glow |
Framer Motion and animations
Framer Motion powers the page transition inLayout.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:CandleCursorreturnsnullon touch devices. Becausemousemoveevents 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.