https://github.com/divriots/flying-boo
boo-ghost halloween component
https://github.com/divriots/flying-boo
Last synced: 4 months ago
JSON representation
boo-ghost halloween component
- Host: GitHub
- URL: https://github.com/divriots/flying-boo
- Owner: divriots
- Created: 2021-10-28T09:17:11.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-10T11:06:31.000Z (over 4 years ago)
- Last Synced: 2025-10-10T03:28:46.545Z (8 months ago)
- Language: TypeScript
- Homepage: https://webcomponents.dev/view/YnTmdvNX77ccZIphMD0p
- Size: 496 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flying Boo
Fun little halloween gimmick Web Component, works anywhere, based on [Lit](https://lit.dev) and [TypeScript](https://www.typescriptlang.org/).
[See landing page](https://divriots.github.io/flying-boo/)
[See the full demos & code](https://webcomponents.dev/edit/YnTmdvNX77ccZIphMD0p/stories/index.stories.js)
## Usage
```sh
npm i @divriots/flying-boo
```
```html
import '@divriots/flying-boo';
```
Or if you want to extend the component
```js
import { FlyingBoo } from '@divriots/flying-boo';
```
Or from a CDN without needing NPM
```html
```
## Features
- Configure the interval speed at which Boo changes direction with the `change-speed` attribute (default 5000, which is milliseconds)
- Configure speed amplifier to change how fast Boo travels with the `speed` attribute (default 1)
- Change the distance at which Boo gets scared with the `scare-distance` attribute (default 100, which is in pixels)
## SPA accumulating Boos
Note that Boo can be put anywhere on the page, and then it will insert itself into `` 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:
```js
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();
```
