Pals

Characters that live on your page. Put one inside an element and it does the rest.

Characters · 18 Interactions · 10 Toys · 6 Groups · 8

Characters 18

Bitbug

pal="bitbug"

A lime beetle that crawls along the real outline of your letters.

Hello, world.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<h1>
  Hello, world.
  <piix-pal pal="bitbug"></piix-pal>
</h1>

<!-- just bitbug (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/bitbug.min.js"></script>

<h1>
  Hello, world.
  <piix-pal pal="bitbug"></piix-pal>
</h1>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/bitbug.min.js"
  data-pals="bitbug@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/bitbug.min.js");
Piixpal.add("bitbug", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="bitbug" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/bitbug.json

import { Bitbug } from "@/components/piixpal/bitbug";

<h1>
  Hello
  <Bitbug />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="bitbug" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="bitbug"></piix-pal></h1>

Options

speed: walking speed multiplier
edge: "text" (glyph outline) or "box" (top edge)
at: starting spot, 0–1
poke it: flips onto its back, legs flailing

Boing

pal="boing"

A jelly drop that bounces on your footer and lands with a splat.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<footer>
  …
  <piix-pal pal="boing"></piix-pal>
</footer>

<!-- just boing (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/boing.min.js"></script>

<footer>
  …
  <piix-pal pal="boing"></piix-pal>
</footer>

<!-- attaches itself to the first footer: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/boing.min.js"
  data-pals="boing@footer"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/boing.min.js");
Piixpal.add("boing", "footer");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="boing" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/boing.json

import { Boing } from "@/components/piixpal/boing";

<h1>
  Hello
  <Boing />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="boing" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="boing"></piix-pal></h1>

Options

energy: jump height multiplier
at: starting spot, 0–1
poke it: does a big spinning jump. Drag and throw it, too

Moss

pal="moss"

A mushroom that sits on your text reading its book, ignoring you (mostly).

Some light reading for a slow afternoon.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<p>
  Some light reading.
  <piix-pal pal="moss"></piix-pal>
</p>

<!-- just moss (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/moss.min.js"></script>

<p>
  Some light reading.
  <piix-pal pal="moss"></piix-pal>
</p>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/moss.min.js"
  data-pals="moss@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/moss.min.js");
Piixpal.add("moss", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="moss" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/moss.json

import { Moss } from "@/components/piixpal/moss";

<h1>
  Hello
  <Moss />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="moss" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="moss"></piix-pal></h1>

Options

at: where it sits, 0–1 (default .85)
edge: "text" or "box"
poke it: turns its back on you. Three pokes and it moves

Lurk

pal="lurk"

A shy creature that peeks over the edge of your cards.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<div class="card">
  …
  <piix-pal pal="lurk"></piix-pal>
</div>

<!-- just lurk (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/lurk.min.js"></script>

<div class="card">
  …
  <piix-pal pal="lurk"></piix-pal>
</div>

<!-- attaches itself to the first .card: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/lurk.min.js"
  data-pals="lurk@.card"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/lurk.min.js");
Piixpal.add("lurk", ".card");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="lurk" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/lurk.json

import { Lurk } from "@/components/piixpal/lurk";

<h1>
  Hello
  <Lurk />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="lurk" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="lurk"></piix-pal></h1>

Options

at: where along the edge it first appears, 0–1
poke it: "eep!" It ducks and pops up somewhere else

Thread

pal="thread"

A spider that dangles from your nav on a long thread.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<nav>
  …
  <piix-pal pal="thread" length="90"></piix-pal>
</nav>

<!-- just thread (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/thread.min.js"></script>

<nav>
  …
  <piix-pal pal="thread" length="90"></piix-pal>
</nav>

<!-- attaches itself to the first nav: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/thread.min.js"
  data-pals="thread@nav"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/thread.min.js");
Piixpal.add("thread", "nav");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="thread" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/thread.json

import { Thread } from "@/components/piixpal/thread";

<h1>
  Hello
  <Thread />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="thread" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="thread"></piix-pal></h1>

Options

length: thread length in px (default 70)
at: where along the edge, 0–1
silk: thread colour
poke it: yo-yos on its thread

Pip

pal="pip"

A round bird that hops between your buttons and perches on them.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<a class="btn">Sign up</a>
<a class="btn">Log in</a>
<piix-pal pal="pip" on=".btn"></piix-pal>

<!-- just pip (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/pip.min.js"></script>

<a class="btn">Sign up</a>
<a class="btn">Log in</a>
<piix-pal pal="pip" on=".btn"></piix-pal>

<!-- attaches itself to the first .btn: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/pip.min.js"
  data-pals="pip@.btn"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/pip.min.js");
Piixpal.add("pip", ".btn");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="pip" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/pip.json

import { Pip } from "@/components/piixpal/pip";

<h1>
  Hello
  <Pip />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="pip" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="pip"></piix-pal></h1>

Options

on: selector for perches, e.g. ".btn"
poke it: takes off

Bumble

pal="bumble"

A fuzzy bee that buzzes about your element.

hive

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<div class="hive">
  <piix-pal pal="bumble"></piix-pal>
</div>

<!-- just bumble (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/bumble.min.js"></script>

<div class="hive">
  <piix-pal pal="bumble"></piix-pal>
</div>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/bumble.min.js"
  data-pals="bumble@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/bumble.min.js");
Piixpal.add("bumble", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="bumble" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/bumble.json

import { Bumble } from "@/components/piixpal/bumble";

<h1>
  Hello
  <Bumble />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="bumble" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="bumble"></piix-pal></h1>

Options

at: where it naps, 0–1
poke it: does a loop-the-loop

Shel

pal="shel"

A snail that creeps along your text, leaving a shiny trail.

Slow and steady.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<h2>
  Slow and steady.
  <piix-pal pal="shel"></piix-pal>
</h2>

<!-- just shel (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/shel.min.js"></script>

<h2>
  Slow and steady.
  <piix-pal pal="shel"></piix-pal>
</h2>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/shel.min.js"
  data-pals="shel@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/shel.min.js");
Piixpal.add("shel", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="shel" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/shel.json

import { Shel } from "@/components/piixpal/shel";

<h1>
  Hello
  <Shel />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="shel" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="shel"></piix-pal></h1>

Options

speed: creeping speed multiplier
edge: "text" or "box"
poke it: hides in its shell, then peeks out

Gecko

pal="gecko"

A gecko that climbs up and around the sides of your cards.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<div class="card">
  …
  <piix-pal pal="gecko"></piix-pal>
</div>

<!-- just gecko (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/gecko.min.js"></script>

<div class="card">
  …
  <piix-pal pal="gecko"></piix-pal>
</div>

<!-- attaches itself to the first .card: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/gecko.min.js"
  data-pals="gecko@.card"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/gecko.min.js");
Piixpal.add("gecko", ".card");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="gecko" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/gecko.json

import { Gecko } from "@/components/piixpal/gecko";

<h1>
  Hello
  <Gecko />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="gecko" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="gecko"></piix-pal></h1>

Options

speed: walking speed multiplier
at: starting point around the border, 0–1
poke it: sprints the other way round

Mole

pal="mole"

Whack-a-mole: it pops out of your element, you bop it.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<section>
  …
  <piix-pal pal="mole"></piix-pal>
</section>

<!-- just mole (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/mole.min.js"></script>

<section>
  …
  <piix-pal pal="mole"></piix-pal>
</section>

<!-- attaches itself to the first footer: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/mole.min.js"
  data-pals="mole@footer"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/mole.min.js");
Piixpal.add("mole", "footer");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="mole" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/mole.json

import { Mole } from "@/components/piixpal/mole";

<h1>
  Hello
  <Mole />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="mole" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="mole"></piix-pal></h1>

Options

piix:bonk: event with detail.count, for keeping score
poke it: bonk! Stars, then back underground. Fires piix:bonk with a count

Balloon

pal="balloon"

A balloon with a face, tied to your element, bobbing in the breeze.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<div class="cta">
  …
  <piix-pal pal="balloon"></piix-pal>
</div>

<!-- just balloon (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/balloon.min.js"></script>

<div class="cta">
  …
  <piix-pal pal="balloon"></piix-pal>
</div>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/balloon.min.js"
  data-pals="balloon@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/balloon.min.js");
Piixpal.add("balloon", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="balloon" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/balloon.json

import { Balloon } from "@/components/piixpal/balloon";

<h1>
  Hello
  <Balloon />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="balloon" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="balloon"></piix-pal></h1>

Options

length: string length in px
at: where it is tied, 0–1
silk: string colour
poke it: pops (and thuds), then slowly re-inflates

Para

pal="para"

A parachutist who drops onto your section when it scrolls into view.

Landing zone

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<h2>
  Landing zone
  <piix-pal pal="para"></piix-pal>
</h2>

<!-- just para (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/para.min.js"></script>

<h2>
  Landing zone
  <piix-pal pal="para"></piix-pal>
</h2>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/para.min.js"
  data-pals="para@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/para.min.js");
Piixpal.add("para", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="para" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/para.json

import { Para } from "@/components/piixpal/para";

<h1>
  Hello
  <Para />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="para" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="para"></piix-pal></h1>

Options

at: landing spot, 0–1
poke it: goes back up for another jump

Roomba

pal="roomba"

A robot vacuum that sweeps along your footer, very seriously.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<footer>
  …
  <piix-pal pal="roomba"></piix-pal>
</footer>

<!-- just roomba (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/roomba.min.js"></script>

<footer>
  …
  <piix-pal pal="roomba"></piix-pal>
</footer>

<!-- attaches itself to the first footer: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/roomba.min.js"
  data-pals="roomba@footer"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/roomba.min.js");
Piixpal.add("roomba", "footer");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="roomba" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/roomba.json

import { Roomba } from "@/components/piixpal/roomba";

<h1>
  Hello
  <Roomba />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="roomba" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="roomba"></piix-pal></h1>

Options

speed: cleaning speed multiplier
poke it: spins in confusion

Kitty

pal="kitty"

A black cat that lounges on your element and swats at the cursor.

Nap spot

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<h2>
  Nap spot
  <piix-pal pal="kitty"></piix-pal>
</h2>

<!-- just kitty (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/kitty.min.js"></script>

<h2>
  Nap spot
  <piix-pal pal="kitty"></piix-pal>
</h2>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/kitty.min.js"
  data-pals="kitty@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/kitty.min.js");
Piixpal.add("kitty", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="kitty" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/kitty.json

import { Kitty } from "@/components/piixpal/kitty";

<h1>
  Hello
  <Kitty />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="kitty" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="kitty"></piix-pal></h1>

Options

at: where it lies, 0–1
edge: "text" or "box"
poke it: purrs (hearts)

Hiss

pal="hiss"

A snake that slithers along your headings.

Hello, world.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<h1>
  Hello, world.
  <piix-pal pal="hiss"></piix-pal>
</h1>

<!-- just hiss (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/hiss.min.js"></script>

<h1>
  Hello, world.
  <piix-pal pal="hiss"></piix-pal>
</h1>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/hiss.min.js"
  data-pals="hiss@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/hiss.min.js");
Piixpal.add("hiss", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="hiss" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/hiss.json

import { Hiss } from "@/components/piixpal/hiss";

<h1>
  Hello
  <Hiss />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="hiss" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="hiss"></piix-pal></h1>

Options

speed: slithering speed
poke it: flips over

Pinch

pal="pinch"

A crab that walks sideways along your text.

Sideways.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<h1>
  Sideways.
  <piix-pal pal="pinch"></piix-pal>
</h1>

<!-- just pinch (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/pinch.min.js"></script>

<h1>
  Sideways.
  <piix-pal pal="pinch"></piix-pal>
</h1>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/pinch.min.js"
  data-pals="pinch@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/pinch.min.js");
Piixpal.add("pinch", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="pinch" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/pinch.json

import { Pinch } from "@/components/piixpal/pinch";

<h1>
  Hello
  <Pinch />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="pinch" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="pinch"></piix-pal></h1>

Options

speed: scuttling speed
poke it: flips onto its back

Shibe

pal="shibe"

A shiba that lounges on your text, tail wagging.

Much nap

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<h2>
  Much nap
  <piix-pal pal="shibe"></piix-pal>
</h2>

<!-- just shibe (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/shibe.min.js"></script>

<h2>
  Much nap
  <piix-pal pal="shibe"></piix-pal>
</h2>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/shibe.min.js"
  data-pals="shibe@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/shibe.min.js");
Piixpal.add("shibe", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="shibe" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/shibe.json

import { Shibe } from "@/components/piixpal/shibe";

<h1>
  Hello
  <Shibe />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="shibe" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="shibe"></piix-pal></h1>

Options

at: where it lies, 0–1
poke it: happy face, tongue out

Capy

pal="capy"

A capybara with a yuzu on its head, completely unbothered.

Some light reading for a slow afternoon.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<p>
  Unbothered.
  <piix-pal pal="capy"></piix-pal>
</p>

<!-- just capy (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/capy.min.js"></script>

<p>
  Unbothered.
  <piix-pal pal="capy"></piix-pal>
</p>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/capy.min.js"
  data-pals="capy@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/capy.min.js");
Piixpal.add("capy", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="capy" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/capy.json

import { Capy } from "@/components/piixpal/capy";

<h1>
  Hello
  <Capy />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="capy" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="capy"></piix-pal></h1>

Options

at: where it sits, 0–1
poke it: calmly turns to face the other way

Interactions 10

Peeper

pal="peeper"

Guards your inputs: follows the caret, covers its eyes for passwords.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<label>
  Email <input type="email" required>
  <piix-pal pal="peeper"></piix-pal>
</label>

<!-- just peeper (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/peeper.min.js"></script>

<label>
  Email <input type="email" required>
  <piix-pal pal="peeper"></piix-pal>
</label>

<!-- attaches itself to the first input: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/peeper.min.js"
  data-pals="peeper@input"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/peeper.min.js");
Piixpal.add("peeper", "input");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="peeper" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/peeper.json

import { Peeper } from "@/components/piixpal/peeper";

<h1>
  Hello
  <Peeper />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="peeper" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="peeper"></piix-pal></h1>

Options

on: the input (or put it inside the label / wrapper)
poke it: a heart (or a polite "...")

Scrolly

pal="scrolly"

A little runner on a reading-progress bar.

Scroll this page: Scrolly runs along the bar at the bottom of this box.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<piix-pal pal="scrolly"></piix-pal>

<!-- just scrolly (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/scrolly.min.js"></script>

<piix-pal pal="scrolly"></piix-pal>

<!-- attaches itself to the first body: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/scrolly.min.js"
  data-pals="scrolly@body"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/scrolly.min.js");
Piixpal.add("scrolly", "body");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="scrolly" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/scrolly.json

import { Scrolly } from "@/components/piixpal/scrolly";

<h1>
  Hello
  <Scrolly />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="scrolly" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="scrolly"></piix-pal></h1>

Options

side: "bottom" or "top"
color: bar colour
box: CSS selector: run along that element instead of the screen
poke it: scrolls you back to the top

Echo

pal="echo"

A copycat cursor that replays your moves half a second late.

Move around and click inside this box: Echo follows you half a second late.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<piix-pal pal="echo"></piix-pal>

<!-- just echo (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/echo.min.js"></script>

<piix-pal pal="echo"></piix-pal>

<!-- attaches itself to the first body: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/echo.min.js"
  data-pals="echo@body"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/echo.min.js");
Piixpal.add("echo", "body");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="echo" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/echo.json

import { Echo } from "@/components/piixpal/echo";

<h1>
  Hello
  <Echo />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="echo" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="echo"></piix-pal></h1>

Options

delay: seconds behind (default 0.5)
box: CSS selector to only follow inside one element
poke it: cannot be poked: it never catches clicks

Snip

pal="snip"

A highlighter that hops to whatever text you select.

Select a few words in this sentence, then copy them.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<article>
  …
  <piix-pal pal="snip"></piix-pal>
</article>

<!-- just snip (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/snip.min.js"></script>

<article>
  …
  <piix-pal pal="snip"></piix-pal>
</article>

<!-- attaches itself to the first p: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/snip.min.js"
  data-pals="snip@p"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/snip.min.js");
Piixpal.add("snip", "p");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="snip" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/snip.json

import { Snip } from "@/components/piixpal/snip";

<h1>
  Hello
  <Snip />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="snip" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="snip"></piix-pal></h1>

Options

on: the text to watch (on="body" watches the whole page)
poke it: a heart

Beep

pal="beep"

A robot that panics when someone ticks “I’m not a robot”.

I’m not a robot

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<label>
  <input type="checkbox"> I’m not a robot
  <piix-pal pal="beep"></piix-pal>
</label>

<!-- just beep (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/beep.min.js"></script>

<label>
  <input type="checkbox"> I’m not a robot
  <piix-pal pal="beep"></piix-pal>
</label>

<!-- attaches itself to the first label: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/beep.min.js"
  data-pals="beep@label"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/beep.min.js");
Piixpal.add("beep", "label");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="beep" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/beep.json

import { Beep } from "@/components/piixpal/beep";

<h1>
  Hello
  <Beep />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="beep" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="beep"></piix-pal></h1>

Options

on: the checkbox or the label that holds it
poke it: a nervous "?"

Router

pal="router"

A Wi-Fi router whose signal bars follow your cursor.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<piix-pal pal="router"></piix-pal>

<!-- just router (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/router.min.js"></script>

<piix-pal pal="router"></piix-pal>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/router.min.js"
  data-pals="router@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/router.min.js");
Piixpal.add("router", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="router" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/router.json

import { Router } from "@/components/piixpal/router";

<h1>
  Hello
  <Router />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="router" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="router"></piix-pal></h1>

Options

at: where it sits, 0–1
poke it: a heart at full bars

Termi

pal="termi"

A tiny terminal that types out your lines, one character at a time.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<piix-pal pal="termi"
  lines="git push|deploying…|✓ live"></piix-pal>

<!-- just termi (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/termi.min.js"></script>

<piix-pal pal="termi"
  lines="git push|deploying…|✓ live"></piix-pal>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/termi.min.js"
  data-pals="termi@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/termi.min.js");
Piixpal.add("termi", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="termi" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/termi.json

import { Termi } from "@/components/piixpal/termi";

<h1>
  Hello
  <Termi />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="termi" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="termi"></piix-pal></h1>

Options

lines: what to type, separated by |
speed: typing speed
poke it: skips to the next line

Frog

pal="frog"

A frog that snaps its tongue at your cursor.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<piix-pal pal="frog"></piix-pal>

<!-- just frog (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/frog.min.js"></script>

<piix-pal pal="frog"></piix-pal>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/frog.min.js"
  data-pals="frog@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/frog.min.js");
Piixpal.add("frog", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="frog" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/frog.json

import { Frog } from "@/components/piixpal/frog";

<h1>
  Hello
  <Frog />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="frog" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="frog"></piix-pal></h1>

Options

at: where it sits, 0–1
poke it: hops along

Penguin

pal="penguin"

A penguin that belly-slides along your element.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<piix-pal pal="penguin"></piix-pal>

<!-- just penguin (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/penguin.min.js"></script>

<piix-pal pal="penguin"></piix-pal>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/penguin.min.js"
  data-pals="penguin@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/penguin.min.js");
Piixpal.add("penguin", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="penguin" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/penguin.json

import { Penguin } from "@/components/piixpal/penguin";

<h1>
  Hello
  <Penguin />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="penguin" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="penguin"></piix-pal></h1>

Options

edge: "text" or "box"
poke it: slips and spins

Rocket

pal="rocket"

Sits on your Deploy button. Click it: countdown, lift-off, landing.

Deploy

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<button class="deploy">
  Deploy
  <piix-pal pal="rocket"></piix-pal>
</button>

<!-- just rocket (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/rocket.min.js"></script>

<button class="deploy">
  Deploy
  <piix-pal pal="rocket"></piix-pal>
</button>

<!-- attaches itself to the first .btn: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/rocket.min.js"
  data-pals="rocket@.btn"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/rocket.min.js");
Piixpal.add("rocket", ".btn");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="rocket" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/rocket.json

import { Rocket } from "@/components/piixpal/rocket";

<h1>
  Hello
  <Rocket />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="rocket" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="rocket"></piix-pal></h1>

Options

at: where it sits, 0–1
poke it: 3, 2, 1, lift-off

Toys 6

Ball

pal="ball"

A beach ball you can throw around your page.

Throw me

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<h2>
  Throw me
  <piix-pal pal="ball"></piix-pal>
</h2>

<!-- just ball (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/ball.min.js"></script>

<h2>
  Throw me
  <piix-pal pal="ball"></piix-pal>
</h2>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/ball.min.js"
  data-pals="ball@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/ball.min.js");
Piixpal.add("ball", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="ball" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/ball.json

import { Ball } from "@/components/piixpal/ball";

<h1>
  Hello
  <Ball />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="ball" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="ball"></piix-pal></h1>

Options

land: CSS selector for surfaces it can land on
at: starting spot, 0–1
box: CSS selector to keep it inside one element (leave out to roam the whole page)
poke it: a little kick into the air

Duck

pal="duck"

A rubber duck you can throw. It squeaks when it lands.

Throw me

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<h2>
  Throw me
  <piix-pal pal="duck"></piix-pal>
</h2>

<!-- just duck (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/duck.min.js"></script>

<h2>
  Throw me
  <piix-pal pal="duck"></piix-pal>
</h2>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/duck.min.js"
  data-pals="duck@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/duck.min.js");
Piixpal.add("duck", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="duck" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/duck.json

import { Duck } from "@/components/piixpal/duck";

<h1>
  Hello
  <Duck />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="duck" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="duck"></piix-pal></h1>

Options

land: CSS selector for surfaces it can land on
at: starting spot, 0–1
box: CSS selector to keep it inside one element (leave out to roam the whole page)
poke it: a little kick into the air

Dice

pal="dice"

Throw it and it lands on a random face.

Throw me

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<h2>
  Throw me
  <piix-pal pal="dice"></piix-pal>
</h2>

<!-- just dice (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/dice.min.js"></script>

<h2>
  Throw me
  <piix-pal pal="dice"></piix-pal>
</h2>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/dice.min.js"
  data-pals="dice@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/dice.min.js");
Piixpal.add("dice", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="dice" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/dice.json

import { Dice } from "@/components/piixpal/dice";

<h1>
  Hello
  <Dice />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="dice" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="dice"></piix-pal></h1>

Options

land: CSS selector for surfaces it can land on
at: starting spot, 0–1
box: CSS selector to keep it inside one element (leave out to roam the whole page)
poke it: a little kick into the air

Pebble

pal="pebble"

A heavy rock that lands with a thud every pal hears.

Throw me

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<h2>
  Throw me
  <piix-pal pal="pebble"></piix-pal>
</h2>

<!-- just pebble (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/pebble.min.js"></script>

<h2>
  Throw me
  <piix-pal pal="pebble"></piix-pal>
</h2>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/pebble.min.js"
  data-pals="pebble@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/pebble.min.js");
Piixpal.add("pebble", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="pebble" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/pebble.json

import { Pebble } from "@/components/piixpal/pebble";

<h1>
  Hello
  <Pebble />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="pebble" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="pebble"></piix-pal></h1>

Options

land: CSS selector for surfaces it can land on
at: starting spot, 0–1
box: CSS selector to keep it inside one element (leave out to roam the whole page)
poke it: a little kick into the air

Cube

pal="cube"

A jelly cube that bounces high and wobbles.

Throw me

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<h2>
  Throw me
  <piix-pal pal="cube"></piix-pal>
</h2>

<!-- just cube (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/cube.min.js"></script>

<h2>
  Throw me
  <piix-pal pal="cube"></piix-pal>
</h2>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/cube.min.js"
  data-pals="cube@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/cube.min.js");
Piixpal.add("cube", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="cube" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/cube.json

import { Cube } from "@/components/piixpal/cube";

<h1>
  Hello
  <Cube />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="cube" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="cube"></piix-pal></h1>

Options

land: CSS selector for surfaces it can land on
at: starting spot, 0–1
box: CSS selector to keep it inside one element (leave out to roam the whole page)
poke it: a little kick into the air

Can

pal="can"

A soda can that rolls off the edge of everything.

Throw me

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<h2>
  Throw me
  <piix-pal pal="can"></piix-pal>
</h2>

<!-- just can (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/can.min.js"></script>

<h2>
  Throw me
  <piix-pal pal="can"></piix-pal>
</h2>

<!-- attaches itself to the first h1: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/can.min.js"
  data-pals="can@h1"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/can.min.js");
Piixpal.add("can", "h1");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="can" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/can.json

import { Can } from "@/components/piixpal/can";

<h1>
  Hello
  <Can />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="can" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="can"></piix-pal></h1>

Options

land: CSS selector for surfaces it can land on
at: starting spot, 0–1
box: CSS selector to keep it inside one element (leave out to roam the whole page)
poke it: a little kick into the air

Groups 8

Ducks

pal="ducks"

A mother duck and her ducklings.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<piix-pal pal="ducks" count="4"></piix-pal>

<!-- just ducks (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/ducks.min.js"></script>

<piix-pal pal="ducks" count="4"></piix-pal>

<!-- attaches itself to the first footer: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/ducks.min.js"
  data-pals="ducks@footer"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/ducks.min.js");
Piixpal.add("ducks", "footer");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="ducks" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/ducks.json

import { Ducks } from "@/components/piixpal/ducks";

<h1>
  Hello
  <Ducks />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="ducks" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="ducks"></piix-pal></h1>

Options

count: number of ducklings (default 4)
poke it: a duckling hops; the mother starts a quack chorus

Ants

pal="ants"

A marching line of ants, some carrying crumbs.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<piix-pal pal="ants" count="9"></piix-pal>

<!-- just ants (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/ants.min.js"></script>

<piix-pal pal="ants" count="9"></piix-pal>

<!-- attaches itself to the first footer: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/ants.min.js"
  data-pals="ants@footer"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/ants.min.js");
Piixpal.add("ants", "footer");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="ants" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/ants.json

import { Ants } from "@/components/piixpal/ants";

<h1>
  Hello
  <Ants />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="ants" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="ants"></piix-pal></h1>

Options

count: number of ants (default 7)
speed: marching speed
poke it: they all jump

Fish

pal="fish"

A school of fish that swims inside any box and flees your cursor.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<div class="tank">
  <piix-pal pal="fish" count="9"></piix-pal>
</div>

<!-- just fish (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/fish.min.js"></script>

<div class="tank">
  <piix-pal pal="fish" count="9"></piix-pal>
</div>

<!-- attaches itself to the first footer: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/fish.min.js"
  data-pals="fish@footer"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/fish.min.js");
Piixpal.add("fish", "footer");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="fish" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/fish.json

import { Fish } from "@/components/piixpal/fish";

<h1>
  Hello
  <Fish />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="fish" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="fish"></piix-pal></h1>

Options

count: number of fish (default 7)
poke it: that fish darts off

Sparrows

pal="sparrows"

Birds on a wire that scatter when you get close.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<hr>
<piix-pal pal="sparrows" on="hr" count="7"></piix-pal>

<!-- just sparrows (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/sparrows.min.js"></script>

<hr>
<piix-pal pal="sparrows" on="hr" count="7"></piix-pal>

<!-- attaches itself to the first footer: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/sparrows.min.js"
  data-pals="sparrows@footer"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/sparrows.min.js");
Piixpal.add("sparrows", "footer");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="sparrows" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/sparrows.json

import { Sparrows } from "@/components/piixpal/sparrows";

<h1>
  Hello
  <Sparrows />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="sparrows" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="sparrows"></piix-pal></h1>

Options

count: number of birds (default 6)
poke it: the whole row loops the sky and lands back

Choir

pal="choir"

A choir who sway and sing in perfect time from a shared score.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<piix-pal pal="choir" count="4" bpm="96"></piix-pal>

<!-- just choir (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/choir.min.js"></script>

<piix-pal pal="choir" count="4" bpm="96"></piix-pal>

<!-- attaches itself to the first footer: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/choir.min.js"
  data-pals="choir@footer"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/choir.min.js");
Piixpal.add("choir", "footer");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="choir" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/choir.json

import { Choir } from "@/components/piixpal/choir";

<h1>
  Hello
  <Choir />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="choir" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="choir"></piix-pal></h1>

Options

count: number of singers (default 4)
bpm: tempo (default 96)
poke it: that singer takes a solo; again to rejoin

Fireflies

pal="fireflies"

Soft blinking lights drifting around an element.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<section class="dark">
  <piix-pal pal="fireflies" count="12"></piix-pal>
</section>

<!-- just fireflies (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/fireflies.min.js"></script>

<section class="dark">
  <piix-pal pal="fireflies" count="12"></piix-pal>
</section>

<!-- attaches itself to the first footer: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/fireflies.min.js"
  data-pals="fireflies@footer"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/fireflies.min.js");
Piixpal.add("fireflies", "footer");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="fireflies" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/fireflies.json

import { Fireflies } from "@/components/piixpal/fireflies";

<h1>
  Hello
  <Fireflies />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="fireflies" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="fireflies"></piix-pal></h1>

Options

count: number of fireflies (default 9)
poke it: they burst away and drift back

Sheep

pal="sheep"

Sheep trot along and jump the fence one at a time, forever.

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<div class="loading">
  <piix-pal pal="sheep"></piix-pal>
</div>

<!-- just sheep (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/sheep.min.js"></script>

<div class="loading">
  <piix-pal pal="sheep"></piix-pal>
</div>

<!-- attaches itself to the first footer: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/sheep.min.js"
  data-pals="sheep@footer"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/sheep.min.js");
Piixpal.add("sheep", "footer");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="sheep" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/sheep.json

import { Sheep } from "@/components/piixpal/sheep";

<h1>
  Hello
  <Sheep />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="sheep" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="sheep"></piix-pal></h1>

Options

count: number of sheep (default 3)
speed: trotting speed
poke it: hearts

Bees

pal="bees"

Worker bees buzzing round their hive.

hive

<!-- once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<div class="hive">
  <piix-pal pal="bees"></piix-pal>
</div>

<!-- just bees (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/bees.min.js"></script>

<div class="hive">
  <piix-pal pal="bees"></piix-pal>
</div>

<!-- attaches itself to the first footer: nothing else to add -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/bees.min.js"
  data-pals="bees@footer"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/bees.min.js");
Piixpal.add("bees", "footer");

// npm install piixpal
import { PiixPal } from "piixpal/react";

<h1>
  Hello
  <PiixPal pal="bees" />
</h1>

npx shadcn@latest add https://piixpal.dvkk.dev/r/bees.json

import { Bees } from "@/components/piixpal/bees";

<h1>
  Hello
  <Bees />
</h1>

// main.js: app.use(Piixpal) from "piixpal/vue"

<h1>
  Hello
  <piix-pal pal="bees" />
</h1>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<h1>Hello <piix-pal pal="bees"></piix-pal></h1>

Options

count: number of bees (default 6)
at: where the hive is, 0–1
poke it: toggles the chase