# 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