spooky.js

Last updated: October 9, 2026

Because.... Why not add some Halloween effects in the background of your website. 👻🎃👻

Ghosts drift across your page, some in front of your content and some behind it, each with its own face and way of moving. Then of course what is halloween with out a glowing jack-o'-lantern that fades in.

Live Demo (your watching it now!)

The ghosts in the back layer slip behind these solid boxes and float back out in front.

The Attic

Dust, old trunks, and a creaking nobody has explained.

The Cellar

Cold air and a flickering bulb. Best not to linger.

The Garden

The pumpkins were not in this arrangement yesterday.

The Library

One book is always out of place when you look back.

Play with it

Change the settings and the ghosts on this page update. The snippet below the controls updates too, so you can copy the settings you like.

Ghosts 7 Chance to start behind 0.45 Ghost opacity 0.8 Phase through content Pumpkin

Your device asks for reduced motion, so spooky.js stays asleep. That's on purpose. You can turn this off with respectReducedMotion: false.

<script src="https://scripts.brebs.net/spooky/spooky.js"></script>

Quick setup

Add this anywhere on your page. Right before </body> works well.

<script src="https://scripts.brebs.net/spooky/spooky.js"></script>

Optional settings

To change the defaults, define window.SpookyConfig before loading the script. Only include the settings you want to change.

<script>
  window.SpookyConfig = {
    ghostCount: 8,
    pumpkinEnabled: true,
    backChance: 0.5
  };
</script>
<script src="https://scripts.brebs.net/spooky/spooky.js"></script>

Setting	Default	Controls
`ghostCount`	7	Number of ghosts on screen
`pumpkinEnabled`	true	Whether the pumpkin shows up
`backChance`	0.45	Chance a ghost starts behind your content (0 to 1)
`pumpkinBackChance`	0.4	Chance the pumpkin appears behind your content
`ghostOpacity`	0.8	How see-through the ghosts are (0 to 1)
`ghostMinSize` / `ghostMaxSize`	50 / 110	Ghost width range in px
`phaseThrough`	true	Ghosts sometimes fade out and swap between front and back
`pumpkinMinDelay` / `pumpkinMaxDelay`	8000 / 22000	Time between pumpkins in ms
`pumpkinDuration`	6500	How long each pumpkin sticks around in ms
`pumpkinSize`	120	Pumpkin width in px
`faces`	all 13	Which faces to use, e.g. `['happy', 'wink', 'silly']`
`respectReducedMotion`	true	Stay off for visitors who prefer reduced motion

The faces are classic, happy, mouthless, surprised, sleepy, angry, dots, wink, mischievous, sad, grumpy, dazed, and silly.

Controls

The script adds a Spooky object you can call from the console or your own buttons:

Spooky.stop();     // clear the ghosts
Spooky.start();    // bring them back
Spooky.pumpkin();  // summon a pumpkin right now

<button onclick="Spooky.pumpkin()">Summon pumpkin</button>

If the back ghosts don't show up

Ghosts in the back layer sit underneath your page. If your theme gives both html and body a solid background, the body's background covers them and you'll only see the front ghosts. Make the body transparent and keep the color on html:

<style>
  body { background: transparent; }
</style>

Ghosts go behind anything with a solid background, like cards and panels, and show through anything without one.

Get the script

You can use the hosted version directly:

<script src="https://scripts.brebs.net/spooky/spooky.js"></script>

Self-hosting (if you like doing that)

If you prefer to host the script yourself, you can copy the source and host it anywhere that serves raw JavaScript. When you self-host, you can also change the two quick settings at the top of the file (SPOOKY_MAX_GHOSTS and SPOOKY_SHOW_PUMPKIN) instead of using SpookyConfig.

One easy option is use omg.lol amazing service of paste.lol.

Copy or download the code of spooky.js
Create a new paste at paste.lol
Name it something like spooky.js
Use the /raw version of the paste as your script source

<script src="https://ericmwalk.paste.lol/spooky.js/raw"></script>