They crawl on your headings, nap on your paragraphs, perch on your buttons and bounce on your footer. Throw them around. Line them up. Fill a stage with hundreds. One script tag, zero dependencies, free forever.
poke them. drag the jelly. Hover the buttons and see who flies off.
<!-- 1. add the script -->
<script src="piixpal.js"></script>
<!-- 2. put a pal inside anything -->
<h1>Hello world
<piix-pal pal="bitbug"></piix-pal>
</h1>Every pal is a component with its own personality: what it lives on, what scares it, what happens when you poke it. Play with them, then copy the tag.
A lime beetle with one very curious antenna. Walks the real outline of your letters, hops across spaces, and bolts when your cursor gets close.
<piix-pal pal="bitbug"></piix-pal>A coral jelly drop with more energy than sense. Hops along your footer, leaps at your cursor, and goes boing when you throw it.
<piix-pal pal="boing"></piix-pal>Some light reading for a slow afternoon.
A mushroom with a book and no interest in you. Reads on your paragraphs, flips pages, dozes off. Poke it three times and it moves somewhere quieter.
<piix-pal pal="moss"></piix-pal>Big eyes, little hands, zero courage. Hides behind your cards and peeks over the edge. Its eyes follow you, but only from a safe distance.
<piix-pal pal="lurk"></piix-pal>A small spider on a long string. Dangles from your nav, swings when you scroll, zips up when you reach for it and lowers itself back down.
<piix-pal pal="thread"></piix-pal>A round bird who loves a good button. Sits on your CTAs, pecks, sings. Hover its perch and it flies a loop, then lands on the next one.
<piix-pal pal="pip"></piix-pal>Sprites sit inline like an image: no positioning, no setup. Their eyes follow your cursor, they blink, breathe and hop when clicked. Go on, wave at them.
<piix-sprite name="mochi"></piix-sprite>Browse all sprites One tag, a stage full of tiny agents. They wander and high-five, swarm your cursor, or walk into place to spell a word. Click the floor to drop one in. Grab one and throw it.
Type a password and Peeper covers its eyes. Tick the robot box and Beep panics. Scroll and Scrolly runs along the bottom of your screen. Select text, copy it, hit deploy.
Play your site as a game. Snow that settles on your letters. Toasts by pigeon. A pull-chain for dark mode. Pets in browser tabs, desktop plants, tours, uploads, carts, cookie banners.
A pal lives on whatever element it's inside. It reads the page for itself: letter outlines, edges, buttons, scroll. You never position anything.
One file, no build step, no dependencies. Works in plain HTML, React, Vue, Svelte, Astro, Webflow and Framer embeds.
Put <piix-pal pal="moss"> inside a heading, a card, a footer. Or point it from anywhere with on="#footer".
Bitbug walks the real glyph contours, Lurk finds the card's edge, Pip hops between every match of on=".btn". They pause off-screen, respect reduced motion and never block a click.
Great defaults with nothing set. When you want control, it's plain HTML attributes, two events and two functions.
| Attribute | What it does | Default |
|---|---|---|
pal | Which character: bitbug boing moss lurk thread pip | bitbug |
on | CSS selector of what to live on. Several matches give Pip more perches. | parent |
do | Swap the behaviour: crawl bounce mind peek hang perch | its own |
at | Where along the element, from 0 (left) to 1 (right). | random |
scale | Size of one sprite pixel, in CSS pixels. | 3–4 |
hue | Recolour it by rotating the hue, in degrees. | 0 |
edge | text walks the glyph outlines, box walks the element's top edge. | text |
speed energy length | Crawl speed, bounce energy, thread length. | 1 · 1 · 70 |
// a pal was poked
pal.addEventListener('piix:poke', e => …)
// poke it yourself
pal.poke()
// tuck pals under a sticky header
:root { --piix-z: 40 }Piixpal.sprite('blip', {
w: 6, h: 4, does: 'crawl',
palette: { k: '#000', g: '#c6f432' },
frames: { walk: [[
'.kkkk.',
'kgkgkk',
'kggggk',
'.k..k.' ]] }
})Pixels are strings. Any pal works with any behaviour that finds the clips it needs.
MIT licensed. Use it on client work, side projects, your portfolio, your 404 page. No sign-up and no tracking. A star on GitHub is plenty.
All 118 components, about 95 KB gzipped, served free by jsDelivr. Then paste any tag.
<script src="…/piixpal.min.js">Every pal and sprite has its own 1–4 KB file. The shared engine loads itself, once.
…/dist/c/kitty.min.jsSay what goes where, right on the script tag. Nothing else to touch.
data-pals="bitbug@h1, boing@footer"Drop-in wrappers and TypeScript types. Or just use the tags: they're web components.
<PiixPal pal="bitbug" />