# Piixpal
> Pixel characters that live on your website: drop-in web components, zero dependencies, free and open source (MIT).
## Install (pick one)
- Script tag: then use the tags anywhere.
- One component only:
- npm: npm install piixpal; React: import { PiixPal } from "piixpal/react"; . Vue: app.use(Piixpal) from "piixpal/vue". Anything else: import "piixpal" in browser code.
- shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/NAME.json, then import { Name } from "@/components/piixpal/NAME".
- No markup:
## Rules
- A pal lives on the element it is placed inside (or on="css selector"). It never blocks clicks.
- box="selector" keeps any pal inside one element.
- Pals are browser-only; in Next.js use the React wrappers or shadcn components (they are client components).
- Docs and live demos: https://piixpal.dvkk.dev/components/
## Components
- Bitbug: A lime beetle that crawls along the real outline of your letters. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/bitbug.json
- Boing: A jelly drop that bounces on your footer and lands with a splat. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/boing.json
- Moss: A mushroom that sits on your text reading its book, ignoring you (mostly). Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/moss.json
- Lurk: A shy creature that peeks over the edge of your cards. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/lurk.json
- Thread: A spider that dangles from your nav on a long thread. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/thread.json
- Pip: A round bird that hops between your buttons and perches on them. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/pip.json
- Bumble: A fuzzy bee that buzzes about your element. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/bumble.json
- Shel: A snail that creeps along your text, leaving a shiny trail. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/shel.json
- Gecko: A gecko that climbs up and around the sides of your cards. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/gecko.json
- Mole: Whack-a-mole: it pops out of your element, you bop it. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/mole.json
- Balloon: A balloon with a face, tied to your element, bobbing in the breeze. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/balloon.json
- Para: A parachutist who drops onto your section when it scrolls into view. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/para.json
- Roomba: A robot vacuum that sweeps along your footer, very seriously. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/roomba.json
- Kitty: A black cat that lounges on your element and swats at the cursor. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/kitty.json
- Hiss: A snake that slithers along your headings. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/hiss.json
- Pinch: A crab that walks sideways along your text. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/pinch.json
- Shibe: A shiba that lounges on your text, tail wagging. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/shibe.json
- Capy: A capybara with a yuzu on its head, completely unbothered. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/capy.json
- Peeper: Guards your inputs: follows the caret, covers its eyes for passwords. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/peeper.json
- Scrolly: A little runner on a reading-progress bar. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/scrolly.json
- Echo: A copycat cursor that replays your moves half a second late. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/echo.json
- Snip: A highlighter that hops to whatever text you select. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/snip.json
- Beep: A robot that panics when someone ticks “I’m not a robot”. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/beep.json
- Router: A Wi-Fi router whose signal bars follow your cursor. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/router.json
- Termi: A tiny terminal that types out your lines, one character at a time. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/termi.json
- Frog: A frog that snaps its tongue at your cursor. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/frog.json
- Penguin: A penguin that belly-slides along your element. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/penguin.json
- Rocket: Sits on your Deploy button. Click it: countdown, lift-off, landing. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/rocket.json
- Ball: A beach ball you can throw around your page. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/ball.json
- Duck: A rubber duck you can throw. It squeaks when it lands. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/duck.json
- Dice: Throw it and it lands on a random face. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/dice.json
- Pebble: A heavy rock that lands with a thud every pal hears. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/pebble.json
- Cube: A jelly cube that bounces high and wobbles. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/cube.json
- Can: A soda can that rolls off the edge of everything. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/can.json
- Ducks: A mother duck and her ducklings. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/ducks.json
- Ants: A marching line of ants, some carrying crumbs. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/ants.json
- Fish: A school of fish that swims inside any box and flees your cursor. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/fish.json
- Sparrows: Birds on a wire that scatter when you get close. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/sparrows.json
- Choir: A choir who sway and sing in perfect time from a shared score. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/choir.json
- Fireflies: Soft blinking lights drifting around an element. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/fireflies.json
- Sheep: Sheep trot along and jump the fence one at a time, forever. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/sheep.json
- Bees: Worker bees buzzing round their hive. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/bees.json
- Bulb: A pull-chain light switch for dark mode. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/bulb.json
- Pix: A tiny hero that lets visitors play your page as a platformer. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/pix.json
- Weather: Snow that settles on your letters, plus rain, leaves and petals. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/weather.json
- Pidge: Toast notifications, delivered by pigeon. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/pidge.json
- Plane: A plane that tows your announcement banner across the page. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/plane.json
- Fetch: A dog that runs off on every fetch() and brings back the response. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/fetch.json
- Scout: Onboarding tours, guided by a tiny explorer. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/scout.json
- Drone: Flies the product picture into your cart when someone adds to cart. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/drone.json
- Crumb: A mouse that eats your cookie banner when someone accepts or rejects. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/crumb.json
- Polly: Reads your page aloud, hopping along each word as it is spoken. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/polly.json
- Gist: An owl that sums up your article in a few key points. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/gist.json
- Tabby: A cat that lives in your browser tab’s icon and naps while you’re away. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/tabby.json
- Sprout: A focus-timer plant that pops out into its own always-on-top window. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/sprout.json
- Nomad: A little traveller who walks between your browser windows. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/nomad.json
- Hatch: Every visitor hatches their own one-of-a-kind pet. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/hatch.json
- Avatar: A unique animated pixel avatar for any name. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/avatar.json
- Gem: A treasure hunt across your whole site. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/gem.json
- Stickers: A sheet of stickers visitors peel off and stick anywhere on your page. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/stickers.json
- Buff: A password-strength meter that lifts heavier as the password gets stronger. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/buff.json
- Meh: A face that rides your rating slider, from furious to delighted. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/meh.json
- Squish: A marshmallow that gets squashed as the text nears its limit. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/squish.json
- Gulp: A pelican that gulps down files dropped on your drop zone. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/gulp.json
- Plug: Shows up when the connection drops, plugs back in when it returns. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/plug.json
- Voxel: Any pal as a 3D toy you can spin, in eight looks from glossy to ASCII. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/voxel.json
- Card: A holographic trading card for any pal, with the pal standing in 3D. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/card.json
- Planet: A tiny voxel world with pals walking round it. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/planet.json
- Globe: A pal in a snow globe. Shake it. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/globe.json
- Holo: A pal projected as a flickering hologram. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/holo.json
- Room: A little isometric voxel diorama with a pal living in it. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/room.json
- Alien: A tiny visitor with three eyes and one antenna. Has questions about your CSS. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/alien.json
- Avocado: Half an avocado, proudly showing off its pit. Ripe for exactly one day. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/avocado.json
- Battery: A battery that is always charging and always at one percent. Brave. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/battery.json
- Astronaut: A tiny astronaut floating in place. Eyes glow behind the visor. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/astronaut.json
- Bolt: A chunky robot whose face is a little screen. Its eyes glow. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/bolt.json
- Brain: A very big brain, thinking very hard. Sparks race along its folds. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/brain.json
- Crt: A beige monitor from the old internet. Its face glows on the screen. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/crt.json
- Elephant: A baby elephant with big ears and a trunk that never sits still. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/elephant.json
- Flick: A little flame with big feelings. Never, ever stands still. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/flick.json
- Fluff: A sheep made almost entirely of cloud. Trots in place, very proudly. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/fluff.json
- Gloop: A slow, happy blob that drips a little. Mostly harmless. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/gloop.json
- Gpu: A graphics card whose two fans are its eyes. RGB strip included, obviously. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/gpu.json
- Hops: Long ears, short attention span. One ear never quite stays up. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/hops.json
- Inky: A small squid with five wiggly arms and one very big question. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/inky.json
- Keycap: A chunky mechanical keycap. Thocky. Click it for a satisfying press. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/keycap.json
- Llama: A fluffy llama with a long neck and a calm, knowing look. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/llama.json
- Mumu: A round little bear who would like a snack, please. Ears wiggle. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/mumu.json
- Server: A server rack keeping your site alive. Its drive lights never stop. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/server.json
- Spud: A lumpy potato with a tiny sprout and a lot of potential. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/spud.json
- Tofu: A block of tofu on two stubby legs, marching on the spot. Firm but fair. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/tofu.json
- Unicorn: The startup kind. A golden horn, a rainbow mane, a billion-dollar smile. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/unicorn.json
- Whale: A friendly whale who surfaces now and then for a little spout. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/whale.json
- Boba: A cup of milk tea with a straw and a lot of pearls. Chewy personality. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/boba.json
- Cactus: A potted cactus who blooms when it is in a good mood. Do not hug. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/cactus.json
- Candle: A little candle with a flame that never sits still. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/candle.json
- Cherries: Two cherries on one stem. Inseparable. Four eyes, one opinion. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/cherries.json
- Cloud: A little cloud with a light, cheerful drizzle. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/cloud.json
- Coffee: A mug of coffee, steaming gently, quietly judging your sleep schedule. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/coffee.json
- Cookie: A chocolate chip cookie with one bite missing. It knows who did it. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/cookie.json
- Donut: A strawberry donut with sprinkles. Has a hole in its life and is fine with it. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/donut.json
- Dragon: A pocket dragon. Flaps its little wings. Breathes a little fire now and then. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/dragon.json
- Egg: An egg with a crack and a lot of questions. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/egg.json
- Floppy: A floppy disk who remembers when 1.44 MB was a lot. Also, the save icon. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/floppy.json
- Heart: A like button with feelings. Beats steadily, blushes easily. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/heart.json
- Inbox: An envelope with a notification badge it cannot stop checking. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/inbox.json
- Loaf: A ginger cat in its most efficient shape. Ears twitch when you are not looking. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/loaf.json
- Mochi: A soft pink rice cake. Squishy, blushy, easily delighted. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/mochi.json
- Modem: A dial-up modem. Its lights blink in a pattern only it understands. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/modem.json
- Onigiri: A rice ball in a seaweed jacket. Calm, round-ish, triangular. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/onigiri.json
- Prompty: A chat bubble who is always just about to reply. Thinking… thinking… Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/prompty.json
- Pudding: A caramel pudding on a plate. Cannot stop jiggling. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/pudding.json
- Robo: A tiny robot head. The antenna light means it is thinking. It is always thinking. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/robo.json
- Star: A little star who twinkles on purpose. Main-character energy. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/star.json
- Sushi: A piece of salmon nigiri wearing its fish like a very good blanket. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/sushi.json
- Toast: A slice of toast with a pat of butter slowly giving up. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/toast.json
- Token: A little gold token that spins. Every model wants it. Context is everything. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/token.json
- Ufo: A very small visitor. Came in peace, stayed for the cursor. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/ufo.json
- Wizard: A very small wizard whose hat does most of the work. Sparkles on request. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/wizard.json
- Crowd: Hundreds of tiny agents on one canvas: they wander, swarm your cursor, or spell a word. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/crowd.json
- PixelType: Any font as chunky extruded pixel blocks that pals can walk on. Tag: . shadcn: npx shadcn@latest add https://piixpal.dvkk.dev/r/pixel-type.json