Install guide · Ghost

Add Halloween effects to Ghost

Ghost has site-wide code injection built in, so no theme edit is needed.

Steps

Open Settings → Advanced → Code injection in Ghost Admin. Some versions list Code injection directly under Settings.
Paste the snippet below into Site footer.
Save and reload your site.

The snippet

One paste, no other files. It loads halloween.js 1.0.3 from jsDelivr and turns on webs in two corners, blinking eyes, flying witches, a dropping spider and a rising tombstone.

<script src="https://cdn.jsdelivr.net/npm/halloween.js@1.0.3/dist/halloween.iife.js"></script>
<script>
(function () {
  function apply() {
    document.body.classList.add(
       "halloween",
       "halloween-screen-left-top",
       "halloween-screen-right-bottom",
       "halloween-eyes",
       "halloween-witches",
       "halloween-spider-drop",
       "halloween-tombstones"
    );
  }
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", apply);
  } else {
    apply();
  }
})();
</script>

Install once, then leave it. The effects switch on by themselves every year from 18 October to 2 November and stay off the rest of the time. There is nothing to remove afterwards. Installed earlier? You will see nothing until 18 October. That is expected, not a bug.

Check that it works

Open your live site in a private window and reload without cache.
Between 18 October and 2 November you should see webs in the screen corners and eyes blinking within a few seconds. Outside those dates the page looks unchanged.

Good to know

Want to test outside the season? Open the playground, set the active season to cover today and copy the snippet it generates.
Ambient effects stop when a visitor has reduced motion turned on. The screen-corner webs stay.
The effects sit in a fixed layer and never shift your page layout.
Ghost outputs the Site footer field just before the closing </body> tag on every page.
Nothing showing in season? See troubleshooting.