Flying Boo

Fun little halloween gimmick Web Component, works anywhere, based on Lit and TypeScript.

See the demo


npm i @divriots/flying-boo
<script type="module">
  import '@divriots/flying-boo';

Or if you want to extend the component

import { FlyingBoo } from '@divriots/flying-boo';

Or from a CDN without needing NPM

<script type="module" src=""></script>


SPA accumulating Boos

Note that Boo can be put anywhere on the page, and then it will insert itself into <html> element and fly all over your page. If you use SPA pattern and have the flying-boo on multiple pages, the number of Boos will accumulate.

Therefore, you probably want to clean up the Boos on route switching, there's a util for that:

import { cleanup } from '@divriots/flying-boo';

// whenever you switch routes call this before the new page renders
// if you're using a different tag-name for your Boo element, pass it as an argument