Piixpal

Quick start

Paste one line, then put a pal inside anything:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/piixpal.min.js"></script>

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

The bug finds the real outline of your letters and starts walking. Every component on the components pages has a live demo and a copy button.

Install

Pick whatever suits your site. Every option works on its own.

Script tag (no build step):

<script src="https://cdn.jsdelivr.net/npm/[email protected]/piixpal.min.js"></script>

or just the components you use, each 1–6 KB (the shared engine loads itself, once):

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/c/bitbug.min.js"></script>

npm

npm install piixpal

import { PiixPal } from "piixpal/react";   // also piixpal/vue and piixpal/svelte

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

shadcn: add a component to your project as a file you own

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

No markup (Webflow, Framer, WordPress, Shopify): say what goes where on the script tag

<script src="https://cdn.jsdelivr.net/npm/[email protected]/piixpal.min.js"
  data-pals="bitbug@h1, boing@footer, [email protected]"></script>

With AI: point your assistant at llms.txt, a plain list of every component and how to add it.

The Builder writes the no-markup line for you, and the bookmarklet drops pals onto any website you're looking at.

What's inside

42 pals	characters that live on your page: crawlers, bouncers, peekers, toys you can throw, whole crews in one tag	browse →
6 in 3D	pals as real 3D models: spinning toys in eight looks (glossy to ASCII), holo trading cards, a voxel planet, a snow globe, a hologram, voxel dioramas	browse →
23 superpowers	pals that step out of the page, do real interface jobs, or turn your site into a game	browse →
49 sprites	inline characters, 30 small pixel ones and 19 big 3D ones, in six render styles	browse →
Crowd	hundreds of tiny agents on one canvas: they wander, swarm or spell a word	try →
Pixel type	any font as chunky extruded blocks that pals can walk on	try →

---

The pals

Every pal is an original character with a job: something it lives on, something that scares it, something that happens when you poke it.

Pal	Does	Lives on	Poke it and…
Bitbug, a lime beetle with one curious antenna	crawl	the real glyph outline of your text: climbs tall letters, hops across spaces	it flips onto its back, legs flailing
Boing, a coral jelly drop with more energy than sense	bounce	the top of any element (footers love it)	it does a big jump. Drag and throw it, too
Moss, a mushroom who'd rather be reading	mind	a line of text, where it reads, flips pages and dozes	it turns its back on you. Three pokes and it moves
Lurk, big eyes, little hands, zero courage	peek	behind a card, peeking over the edge	"eep!" It ducks and pops up somewhere else
Thread, a small spider on a long string	hang	the bottom edge of a nav or banner. Swings when you scroll	it yo-yos
Pip, a round bird who loves a good button	perch	your buttons. Hover one and it flies to the next	it takes off
Bumble, a fuzzy bee	follow	naps on its element, then follows your cursor around the page and flies home when you stop	loop-the-loop
Shel, a very slow snail	creep	the top of your text, leaving a shimmering slime trail	it hides in its shell

More characters:

Pal	Does
Gecko	climb	walks the whole border of a card, upside-down underneath too
Mole	pop	whack-a-mole along any edge; fires piix:bonk with a count
Balloon	float	tied to your element, sways in the cursor's breeze, pops and re-inflates
Para	drop	parachutes in when its section scrolls into view
Roomba	sweep	cleans along an element, beeps at the cursor
Kitty	lounge	lounges, swats the cursor, naps, purrs

Toy box (do="toss")

ball duck dice pebble cube can: grab and throw them. They land on real elements (headings, paragraphs, buttons, cards), roll off edges onto whatever is below, and can be batted with a fast cursor swipe. Dice land on a random face; the pebble thuds so loudly other pals react. land="css" sets what counts as a surface.

Groups: one tag, a whole crew

Pal	Does
ducks	parade	a mother duck and ducklings who follow her exact path (count)
ants	march	a marching line carrying crumbs; scatters and regroups
fish	school	a flocking school inside any box; flees the cursor
sparrows	wire	birds on a wire that hop in a ripple
choir	choir	singers in perfect time, solos on click (bpm)
fireflies	glow	blinking lights that gather round the cursor
sheep	count	jump the fence one by one; the fence keeps count
bees	beeline	follow your cursor in single file

New ways to play

Pals that react to what people actually do on your site:

This is the beginning of the README. Read the rest at the original. Read the full README ↗