Fun little halloween gimmick Web Component, works anywhere, based on Lit and TypeScript.
npm i @divriots/flying-boo<script type="module">
import '@divriots/flying-boo';
</script>
<flying-boo></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="https://unpkg.com/@divriots/flying-boo/dist/index.js?module"></script>
<flying-boo></flying-boo>- Configure the interval speed at which Boo changes direction with the
change-speedattribute (default 5000, which is milliseconds) - Configure speed amplifier to change how fast Boo travels with the
speedattribute (default 1) - Change the distance at which Boo gets scared with the
scare-distanceattribute (default 100, which is in pixels)
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
cleanup();