How it works

Two gates#

The library is active only when both are true:

1. <body> has the halloween class (the master switch).
2. Today is inside the season window.

If either is false, every effect, the corner webs and the badge are removed.

When it checks#

It checks once the page is ready, and again whenever <body> changes in one of these ways:

• Its class attribute changes.
• Its data-halloween-start or data-halloween-end attribute changes.
• The visitor changes the reduced-motion setting.

There is no polling. A change of date while the page sits open is not noticed on its own: see season window and halloween() in the JS API.

What it adds to the page#

• A single <style> element with the id halloween-styles, added to <head> once. All the CSS is inside the bundle.
• One div with the class halloween-page-layer at the end of <body>. It is fixed to the window, covers it, ignores pointer events and is hidden from assistive technology. Effects and corner webs live inside it. It stays in the page when the library switches off. It is empty then.
• The badge, only when you opt in. See badge.

It does not change your markup, does not move or resize anything, and does not change <body>'s layout.

What it never does#

• It never loads anything from the network. All artwork is inline.
• It never changes your existing body classes. It only reads them.
• It never sets a color unless you ask for one.

Timing#

Each effect has its own timer. The timer keeps running while the tab is in the background, but creates nothing until the tab is visible. Under reduced motion no timers run for ambient effects at all. See ambient effects and accessibility.