Superpowers

Pals that step out of the page, do real interface jobs, or turn your site into a game.

Beyond the page · 5 Pals with jobs · 13 Play your site · 5

Beyond the page 5

Polly

pal="polly"

Reads your page aloud, hopping along each word as it is spoken.

A short story

Once there was a parrot who loved words. It read every page it could find, out loud, hopping from word to word so nobody lost their place.

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

<button id="listen">Listen</button>

<article>
  <piix-pal pal="polly" button="#listen"></piix-pal>
  <h1>My post</h1>
  <p>…</p>
</article>

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

<button id="listen">Listen</button>

<article>
  <piix-pal pal="polly" button="#listen"></piix-pal>
  <h1>My post</h1>
  <p>…</p>
</article>

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

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

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

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

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

import { Polly } from "@/components/piixpal/polly";

<h1>
  Hello
  <Polly />
</h1>

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

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

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

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

Options

on: what to read (or put the tag inside it)
button: a real button that starts and pauses it
rate: speaking speed (default 1)
pitch: voice pitch (default 1.15, a bit parrot)
voice: part of a voice name to prefer, e.g. "Samantha"
API: el.ctl.read() el.ctl.pause() el.ctl.stop()
events: piix:read-start, piix:read-end { done }

Gist

pal="gist"

An owl that sums up your article in a few key points.

Why pixel pals?

Websites got very serious. Every page looks like every other page. Pixel pals give a site a little life without getting in the way. They never block a click and they stay out of the way of screen readers. They are small, free and made for anyone.

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

<article>
  <piix-pal pal="gist"></piix-pal>
  <h1>My long post</h1>
  <p>…</p>
</article>

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

<article>
  <piix-pal pal="gist"></piix-pal>
  <h1>My long post</h1>
  <p>…</p>
</article>

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

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

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

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

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

import { Gist } from "@/components/piixpal/gist";

<h1>
  Hello
  <Gist />
</h1>

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

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

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

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

Options

on: what to summarise (or put the tag inside it)
points: how many points (default 3)
button: a real button that asks for the summary
API: el.ctl.summarize()
events: piix:gist { points, source }

Tabby

pal="tabby"

A cat that lives in your browser tab’s icon and naps while you’re away.

Superpowers · Piixpal×

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

<footer>
  <piix-pal pal="tabby" progress
    away="Come back! Tabby misses you"></piix-pal>
</footer>

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

<footer>
  <piix-pal pal="tabby" progress
    away="Come back! Tabby misses you"></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/tabby.min.js"
  data-pals="tabby@footer"></script>

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

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

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

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

import { Tabby } from "@/components/piixpal/tabby";

<h1>
  Hello
  <Tabby />
</h1>

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

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

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

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

Options

away: what the tab title says while you are gone (default “Come back! Tabby misses you”)
progress: draw a reading-progress ring around the icon
preview: also draw the icon on these <canvas> elements

Sprout

pal="sprout"

A focus-timer plant that pops out into its own always-on-top window.

A focus timer that grows. Click the plant.

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

<footer>
  <piix-pal pal="sprout" minutes="25" break="5"></piix-pal>
</footer>

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

<footer>
  <piix-pal pal="sprout" minutes="25" break="5"></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/sprout.min.js"
  data-pals="sprout@footer"></script>

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

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

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

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

import { Sprout } from "@/components/piixpal/sprout";

<h1>
  Hello
  <Sprout />
</h1>

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

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

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

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

Options

minutes: focus length (default 25)
break: break length (default 5)
API: el.ctl.open() el.ctl.popout()
events: piix:bloom, piix:popout

Nomad

pal="nomad"

A little traveller who walks between your browser windows.

Nomad walks out of this box and into the other window, then back again.

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

<!-- on every page of your site -->
<piix-pal pal="nomad"></piix-pal>

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

<!-- on every page of your site -->
<piix-pal pal="nomad"></piix-pal>

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

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

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

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

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

import { Nomad } from "@/components/piixpal/nomad";

<h1>
  Hello
  <Nomad />
</h1>

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

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

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

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

Options

window: the page to open with el.ctl.invite() (default: this page)
API: el.ctl.invite()
events: piix:arrive, piix:depart

Pals with jobs 13

Bulb

pal="bulb"

A pull-chain light switch for dark mode.

Lights?

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

<!-- anywhere: it hangs from the top of the screen -->
<piix-pal pal="bulb" toggle="data-theme:dark|light"></piix-pal>

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

<!-- anywhere: it hangs from the top of the screen -->
<piix-pal pal="bulb" toggle="data-theme:dark|light"></piix-pal>

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

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

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

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

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

import { Bulb } from "@/components/piixpal/bulb";

<h1>
  Hello
  <Bulb />
</h1>

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

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

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

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

Options

toggle: class:dark (default) or an attribute cycle like data-theme:dark|light; the first value is lights-off
target: what to toggle (default <html>)
at: where across the screen it hangs, 0–1 (default .9)
length: chain length in px (default 120)
top: px from the top, to clear a sticky header
events: piix:toggle { dark, value }

Pidge

pal="pidge"

Toast notifications, delivered by pigeon.

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

<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/pidge.min.js"></script>
<script>
  Piixpal.toast("Saved!", { type: "ok" });
</script>

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

<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/pidge.min.js"></script>
<script>
  Piixpal.toast("Saved!", { type: "ok" });
</script>

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

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

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

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

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

import { Pidge } from "@/components/piixpal/pidge";

<h1>
  Hello
  <Pidge />
</h1>

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

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

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

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

Options

type: { type: "ok" | "error" | "info" }
title: { title: "Mia" } a bold first line
time: { time: 6000 } ms on screen, 0 = until dismissed (default 4200)
API: Piixpal.toast(msg, opts) el.ctl.toast(msg, opts) el.ctl.clear()

Plane

pal="plane"

A plane that tows your announcement banner across the page.

Banners are real links, so they work with keyboards and screen readers too.

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

<piix-pal pal="plane"
  text="v2 is out! Read the post →"
  href="/blog/v2"></piix-pal>

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

<piix-pal pal="plane"
  text="v2 is out! Read the post →"
  href="/blog/v2"></piix-pal>

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

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

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

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

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

import { Plane } from "@/components/piixpal/plane";

<h1>
  Hello
  <Plane />
</h1>

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

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

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

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

Options

text: what the banner says
href: makes the banner a link
top: px from the top of the screen (default 90)
repeat: seconds between passes, 0 = once (default 0)
always: fly on every page view, not once per session
API: el.ctl.fly()

Fetch

pal="fetch"

A dog that runs off on every fetch() and brings back the response.

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

<footer>
  …
  <piix-pal pal="fetch" match="/api/"></piix-pal>
</footer>

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

<footer>
  …
  <piix-pal pal="fetch" match="/api/"></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/fetch.min.js"
  data-pals="fetch@footer"></script>

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

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

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

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

import { Fetch } from "@/components/piixpal/fetch";

<h1>
  Hello
  <Fetch />
</h1>

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

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

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

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

Options

match: only count requests whose URL contains this, e.g. /api/
at: where it sits on its element, 0–1
API: Piixpal.busy(promise)

Scout

pal="scout"

Onboarding tours, guided by a tiny explorer.

Click Scout to take the tour.

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

<button data-tour="Start a new project here">New</button>
<input data-tour="Search everything">

<header>
  <piix-pal pal="scout"></piix-pal>
</header>

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

<button data-tour="Start a new project here">New</button>
<input data-tour="Search everything">

<header>
  <piix-pal pal="scout"></piix-pal>
</header>

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

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

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

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

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

import { Scout } from "@/components/piixpal/scout";

<h1>
  Hello
  <Scout />
</h1>

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

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

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

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

Options

data-tour: on any element: the text for that stop (data-tour-step to order, data-tour-title for a heading)
steps: or list the stops on the tag: #new: Start here | #search: Find anything
start: "auto" begins by itself, once per visitor
API: el.ctl.start(steps?) el.ctl.next() el.ctl.back() el.ctl.end()
events: piix:tour-step, piix:tour-end

Drone

pal="drone"

Flies the product picture into your cart when someone adds to cart.

Cart 0

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

<a id="cart">Cart <b class="count">0</b></a>

<article data-product>
  <img src="tee.png" alt="Pixel tee">
  <button class="add-to-cart">Add to cart</button>
</article>

<piix-pal pal="drone" on="#cart"></piix-pal>

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

<a id="cart">Cart <b class="count">0</b></a>

<article data-product>
  <img src="tee.png" alt="Pixel tee">
  <button class="add-to-cart">Add to cart</button>
</article>

<piix-pal pal="drone" on="#cart"></piix-pal>

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

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

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

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

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

import { Drone } from "@/components/piixpal/drone";

<h1>
  Hello
  <Drone />
</h1>

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

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

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

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

Options

on: your cart icon (the drone lives next to it)
from: which buttons send it (default .add-to-cart, [data-add-to-cart])
count: a number in the cart to add one to (default .count, [data-count])
events: piix:delivered { button } on the pal and the cart

Crumb

pal="crumb"

A mouse that eats your cookie banner when someone accepts or rejects.

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

<div id="cookie-banner">
  We use cookies…
  <button>Accept</button>
  <button>Reject</button>
  <piix-pal pal="crumb"></piix-pal>
</div>

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

<div id="cookie-banner">
  We use cookies…
  <button>Accept</button>
  <button>Reject</button>
  <piix-pal pal="crumb"></piix-pal>
</div>

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

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/crumb.min.js");
Piixpal.add("crumb", "#cookie-banner");

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

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

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

import { Crumb } from "@/components/piixpal/crumb";

<h1>
  Hello
  <Crumb />
</h1>

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

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

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

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

Options

on: the banner (or put the tag inside it)
at: where it sits on the banner, 0–1 (default .82)
events: piix:eaten

Avatar

<piix-avatar>

A unique animated pixel avatar for any name.

mia These little guys are so good.

sam Mine has horns!

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

<div class="comment">
  <piix-avatar seed="mia" size="40"></piix-avatar>
  <p><b>mia</b> Hello!</p>
</div>

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

<div class="comment">
  <piix-avatar seed="mia" size="40"></piix-avatar>
  <p><b>mia</b> Hello!</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/avatar.min.js"
  data-pals="avatar@.comment?seed=someone"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/avatar.min.js");
Piixpal.add("avatar", ".comment", {seed: "someone"});

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

<PiixAvatar />

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

import { Avatar } from "@/components/piixpal/avatar";

<Avatar />

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

<div class="comment">
  <piix-avatar seed="mia" size="40"></piix-avatar>
  <p><b>mia</b> Hello!</p>
</div>

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

<div class="comment">
  <piix-avatar seed="mia" size="40"></piix-avatar>
  <p><b>mia</b> Hello!</p>
</div>

Options

seed: any word; same word, same creature
size: width in px (default 64)
render: pixel, dots, halftone, dither, ascii or voxel
look: mouse, wander or none

Buff

pal="buff"

A password-strength meter that lifts heavier as the password gets stronger.

Choose a password:

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

<label>
  Password
  <input type="password">
  <piix-pal pal="buff"></piix-pal>
</label>

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

<label>
  Password
  <input type="password">
  <piix-pal pal="buff"></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/buff.min.js"
  data-pals="buff@label"></script>

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

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

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

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

import { Buff } from "@/components/piixpal/buff";

<h1>
  Hello
  <Buff />
</h1>

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

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

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

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

Options

on: the password input (or put the tag inside its label)
at: where it stands on the field, 0–1 (default .9)
API: el.ctl.score
events: piix:strength { score, label }

Meh

pal="meh"

A face that rides your rating slider, from furious to delighted.

How was your day?

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

<label>
  How was it?
  <input type="range" min="0" max="10">
  <piix-pal pal="meh"></piix-pal>
</label>

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

<label>
  How was it?
  <input type="range" min="0" max="10">
  <piix-pal pal="meh"></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/meh.min.js"
  data-pals="meh@label"></script>

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

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

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

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

import { Meh } from "@/components/piixpal/meh";

<h1>
  Hello
  <Meh />
</h1>

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

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

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

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

Options

on: the slider, a group of radio buttons, or a select
events: piix:mood { value, level }

Squish

pal="squish"

A marshmallow that gets squashed as the text nears its limit.

Write a very short bio:

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

<label>
  Bio
  <textarea maxlength="140"></textarea>
  <piix-pal pal="squish"></piix-pal>
</label>

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

<label>
  Bio
  <textarea maxlength="140"></textarea>
  <piix-pal pal="squish"></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/squish.min.js"
  data-pals="squish@label"></script>

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

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

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

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

import { Squish } from "@/components/piixpal/squish";

<h1>
  Hello
  <Squish />
</h1>

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

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

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

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

Options

on: the textarea or input (or put the tag inside its label)
limit: the limit, if the field has no maxlength (default 280)
events: piix:limit { length, limit, left }

Gulp

pal="gulp"

A pelican that gulps down files dropped on your drop zone.

Drop a file hereor click to pick one

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

<div id="drop">Drop files here</div>
<piix-pal pal="gulp" on="#drop" accept></piix-pal>

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

<div id="drop">Drop files here</div>
<piix-pal pal="gulp" on="#drop" accept></piix-pal>

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

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

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

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

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

import { Gulp } from "@/components/piixpal/gulp";

<h1>
  Hello
  <Gulp />
</h1>

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

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

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

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

Options

on: the drop zone, or a file input
accept: let the zone take drops by itself (leave it off if your code already handles them)
at: where it stands on the zone, 0–1
events: piix:gulp { files }

Plug

pal="plug"

Shows up when the connection drops, plugs back in when it returns.

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

<!-- anywhere: it waits in the corner -->
<piix-pal pal="plug"></piix-pal>

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

<!-- anywhere: it waits in the corner -->
<piix-pal pal="plug"></piix-pal>

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

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

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

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

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

import { Plug } from "@/components/piixpal/plug";

<h1>
  Hello
  <Plug />
</h1>

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

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

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

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

Options

always: stay in the corner, plugged in, even when online
API: el.ctl.offline() el.ctl.online()
events: piix:offline, piix:online

Play your site 5

Pix

pal="pix"

A tiny hero that lets visitors play your page as a platformer.

Play me

Every line of text is a platform. Bump the buttons from below.

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

<h1>
  Welcome to my site
  <piix-pal pal="pix"></piix-pal>
</h1>

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

<h1>
  Welcome to my site
  <piix-pal pal="pix"></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/pix.min.js"
  data-pals="pix@h1"></script>

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

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

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

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

import { Pix } from "@/components/piixpal/pix";

<h1>
  Hello
  <Pix />
</h1>

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

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

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

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

Options

coins: how many coins to hide, 0 for none (default 10)
land: CSS selector for what counts as a platform
play: "keys" lets the arrow keys start a game too
API: el.ctl.start() el.ctl.stop()
events: piix:play, piix:coin, piix:win, piix:stop

Weather

<piix-weather>

Snow that settles on your letters, plus rain, leaves and petals.

Let it snow

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

<!-- the whole page -->
<piix-weather kind="snow"></piix-weather>

<!-- or just inside one element -->
<header class="hero">
  <h1>Happy holidays</h1>
  <piix-weather kind="snow" amount="2"></piix-weather>
</header>

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

<!-- the whole page -->
<piix-weather kind="snow"></piix-weather>

<!-- or just inside one element -->
<header class="hero">
  <h1>Happy holidays</h1>
  <piix-weather kind="snow" amount="2"></piix-weather>
</header>

<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/weather.min.js"
  data-pals="weather@body?kind=snow"></script>

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

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

<PiixWeather />

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

import { Weather } from "@/components/piixpal/weather";

<Weather />

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

<!-- the whole page -->
<piix-weather kind="snow"></piix-weather>

<!-- or just inside one element -->
<header class="hero">
  <h1>Happy holidays</h1>
  <piix-weather kind="snow" amount="2"></piix-weather>
</header>

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

<!-- the whole page -->
<piix-weather kind="snow"></piix-weather>

<!-- or just inside one element -->
<header class="hero">
  <h1>Happy holidays</h1>
  <piix-weather kind="snow" amount="2"></piix-weather>
</header>

Options

kind: snow, rain, leaves or petals (default snow)
amount: 0–3, how much falls (default 1)
land: CSS selector for what it settles on
box: keep it inside one element; put the tag inside any element (not <body>) and it stays in there too
API: el.clear()

Hatch

pal="hatch"

Every visitor hatches their own one-of-a-kind pet.

Tap the egg. What hatches is yours alone.

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

<footer>
  <piix-pal pal="hatch" visits="3"></piix-pal>
</footer>

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

<footer>
  <piix-pal pal="hatch" visits="3"></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/hatch.min.js"
  data-pals="hatch@footer"></script>

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

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

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

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

import { Hatch } from "@/components/piixpal/hatch";

<h1>
  Hello
  <Hatch />
</h1>

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

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

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

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

Options

visits: visits before it hatches on its own (default 3)
at: where it lives on its element, 0–1
API: el.ctl.hatch() el.ctl.reset() el.ctl.name
events: piix:hatch { name, seed }

Gem

pal="gem"

A treasure hunt across your whole site.

Treasure

Gems hide on headings, on lines of text, on buttons, anywhere.

A button

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

<!-- one per gem, on any pages you like -->
<piix-pal pal="gem" hunt="launch" gem="1" total="5"
  reward="PIX10"></piix-pal>

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

<!-- one per gem, on any pages you like -->
<piix-pal pal="gem" hunt="launch" gem="1" total="5"
  reward="PIX10"></piix-pal>

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

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

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

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

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

import { Gem } from "@/components/piixpal/gem";

<h1>
  Hello
  <Gem />
</h1>

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

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

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

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

Options

hunt: the name of the hunt (gems of one hunt share a jar)
gem: this gem’s id within the hunt
total: how many gems there are
reward: a code to show when the jar is full
color: the gem’s colour
API: el.ctl.reset()
events: piix:gem { hunt, found, total }, piix:hunt-done { hunt, reward }

Stickers

<piix-stickers>

A sheet of stickers visitors peel off and stick anywhere on your page.

Stick it here

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

<piix-stickers names="heart,star,bolt,mochi,ufo"></piix-stickers>

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

<piix-stickers names="heart,star,bolt,mochi,ufo"></piix-stickers>

<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/stickers.min.js"
  data-pals="stickers@footer"></script>

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

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

<PiixStickers />

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

import { Stickers } from "@/components/piixpal/stickers";

<Stickers />

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

<piix-stickers names="heart,star,bolt,mochi,ufo"></piix-stickers>

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

<piix-stickers names="heart,star,bolt,mochi,ufo"></piix-stickers>

Options

names: which stickers, comma separated: heart, star, bolt, smile, crown, wow, or any sprite’s name
box: only let them stick inside one element
API: el.clear()