Halloween effects, minus the framework
Make your site haunted in one script tag.
Screen-corner webs, blinking eyes, flying witches, a dropping spider and a rising tombstone. Zero dependencies, seasonal by default.
- Zero dependencies
- Under 10 KB gzip
- Reduced-motion aware
- CDN + npm
Build your Halloween setup
Every change updates the live preview instantly.
Install
npm install halloween.jsimport "halloween.js";No-code platform guides (WordPress, Webflow, Shopify, Squarespace)
- WordPress — Theme Editor → header.php, or any "Insert Headers and Footers"-type plugin.
- Webflow — Project Settings → Custom Code → Head Code (or Page Settings for one page).
-
Shopify — Edit Code → theme.liquid, paste before
</head>. - Squarespace — Settings → Advanced → Code Injection → Header.
Paste the same script tag from the "Script tag" panel above, then add
class="halloween" to <body> (or
document.body.classList.add("halloween") where the platform doesn't
expose <body> directly). Full steps in the
README.
Advanced · Active season
Default is 18 Oct – 2 Nov. Leave it as-is unless you need a different window.
Your <body> tag
These controls update your <body> classes and attributes below —
the <script> tag itself never changes.
No layout changes
Ambient effects render in a fixed overlay layer — nothing else on the page shifts or resizes.
Seasonal by default
Only runs in a window around Halloween unless you widen or override it.
Accessible motion
Respects prefers-reduced-motion live, without a page reload.