Astronaut big · 3d
A tiny astronaut floating in place. Eyes glow behind the visor.
Sprites
Characters that sit inline, like an image. Their eyes follow the cursor; they blink, hop and nap.
49 spritespixel · dots · halftone · dither · ascii · 3Dinline, no positioningeyes follow the cursorone tag
Customise
Press Use on any sprite below, tune it, and copy the code for your setup.
gloop
Render
Eyes
Extras
Big sprites
Bold, ghost-scale characters for heroes, empty states and 404s. They render as chunky 3D blocks that turn toward your cursor, lean in, flinch when you get close, and take any colour with color="…". Try render="pixel" or render="dots" for a flat or dot-matrix look.
Bolt big · 3d
A chunky robot whose face is a little screen. Its eyes glow.
Brain big · 3d
A very big brain, thinking very hard. Sparks race along its folds.
Crt big · 3d
A beige monitor from the old internet. Its face glows on the screen.
Elephant big · 3d
A baby elephant with big ears and a trunk that never sits still.
Flick big · 3d
A little flame with big feelings. Never, ever stands still.
Fluff big · 3d
A sheep made almost entirely of cloud. Trots in place, very proudly.
Gloop big · 3d
A slow, happy blob that drips a little. Mostly harmless.
Gpu big · 3d
A graphics card whose two fans are its eyes. RGB strip included, obviously.
Hops big · 3d
Long ears, short attention span. One ear never quite stays up.
Inky big · 3d
A small squid with five wiggly arms and one very big question.
Keycap big · 3d
A chunky mechanical keycap. Thocky. Click it for a satisfying press.
Llama big · 3d
A fluffy llama with a long neck and a calm, knowing look.
Mumu big · 3d
A round little bear who would like a snack, please. Ears wiggle.
Server big · 3d
A server rack keeping your site alive. Its drive lights never stop.
Spud big · 3d
A lumpy potato with a tiny sprout and a lot of potential.
Tofu big · 3d
A block of tofu on two stubby legs, marching on the spot. Firm but fair.
Unicorn big · 3d
The startup kind. A golden horn, a rainbow mane, a billion-dollar smile.
Whale big · 3d
A friendly whale who surfaces now and then for a little spout.
Sprites
Small inline characters. Click one to see it hop; press Use to tune it and get the code.
Alien alien
A tiny visitor with three eyes and one antenna. Has questions about your CSS.
Avocado avocado
Half an avocado, proudly showing off its pit. Ripe for exactly one day.
Battery battery
A battery that is always charging and always at one percent. Brave.
Boba boba
A cup of milk tea with a straw and a lot of pearls. Chewy personality.
Cactus cactus
A potted cactus who blooms when it is in a good mood. Do not hug.
Candle candle
A little candle with a flame that never sits still.
Cherries cherries
Two cherries on one stem. Inseparable. Four eyes, one opinion.
Cloud cloud
A little cloud with a light, cheerful drizzle.
Coffee coffee
A mug of coffee, steaming gently, quietly judging your sleep schedule.
Cookie cookie
A chocolate chip cookie with one bite missing. It knows who did it.
Donut donut
A strawberry donut with sprinkles. Has a hole in its life and is fine with it.
Dragon dragon
A pocket dragon. Flaps its little wings. Breathes a little fire now and then.
Egg egg
An egg with a crack and a lot of questions.
Floppy floppy
A floppy disk who remembers when 1.44 MB was a lot. Also, the save icon.
Heart heart
A like button with feelings. Beats steadily, blushes easily.
Inbox inbox
An envelope with a notification badge it cannot stop checking.
Loaf loaf
A ginger cat in its most efficient shape. Ears twitch when you are not looking.
Mochi mochi
A soft pink rice cake. Squishy, blushy, easily delighted.
Modem modem
A dial-up modem. Its lights blink in a pattern only it understands.
Onigiri onigiri
A rice ball in a seaweed jacket. Calm, round-ish, triangular.
Planet planet
A small ringed planet. Spins slowly, shines a little, thinks big.
Prompty prompty
A chat bubble who is always just about to reply. Thinking… thinking…
Pudding pudding
A caramel pudding on a plate. Cannot stop jiggling.
Robo robo
A tiny robot head. The antenna light means it is thinking. It is always thinking.
Star star
A little star who twinkles on purpose. Main-character energy.
Sushi sushi
A piece of salmon nigiri wearing its fish like a very good blanket.
Toast toast
A slice of toast with a pat of butter slowly giving up.
Token token
A little gold token that spins. Every model wants it. Context is everything.
Ufo ufo
A very small visitor. Came in peace, stayed for the cursor.
Wizard wizard
A very small wizard whose hat does most of the work. Sparkles on request.
Attributes
All optional. Size snaps to whole sprite pixels, so they always stay crisp.
| Attribute | What it does | Default |
|---|---|---|
name | which sprite: alien avocado battery astronaut bolt brain crt elephant flick fluff gloop gpu hops inky keycap llama mumu server spud tofu unicorn whale boba cactus candle cherries cloud coffee cookie donut dragon egg floppy heart inbox loaf mochi modem onigiri planet prompty pudding robo star sushi toast token ufo wizard | mochi |
size | width in CSS px (rounded to whole sprite pixels) | 5 × width |
scale | or set the size of one sprite pixel directly | 5 |
render | pixel flat blocks, dots LED dot-matrix, halftone shaded sub-dots, dither 1-bit grain, ascii characters, voxel chunky 3D that turns toward the cursor | pixel (big: voxel) |
depth | voxel extrusion, in sprite pixels | 3 (big: 2) |
color | body colour for big sprites; shade and highlight are derived from it | its own |
eye | pupil colour | its own |
hue | recolour by rotating the hue, in degrees | 0 |
look | mouse follows the cursor, wander looks around, none looks ahead | mouse |
shy | leans away when the cursor gets close (no-shy turns it off on big ones) | off (big: on) |
tilt | leans toward the cursor (no-tilt turns it off) | off (big: on) |
still | no breathing or hopping | off |
sleep-after | seconds without input before it naps; 0 = never | 25 |
aria-label | give it one if it means something; otherwise it is hidden from screen readers | – |
Draw your own
A sprite is a few strings of pixels plus where its eyes are. Eyes are drawn live on top, so blinking and looking around come free.
Piixpal.figure('blob', {
w: 8, h: 6,
palette: { k: '#17121f', b: '#c6f432', w: '#ffffff' },
frames: [[
'.kkkkkk.',
'kbbbbbbk',
'kbwbbwbk',
'kbwbbwbk',
'kbbbbbbk',
'.kkkkkk.'
]],
eyes: [{ x: 2, y: 2, w: 1, h: 2 }, { x: 5, y: 2, w: 1, h: 2 }],
lid: 'b'
});
// <piix-sprite name="blob"></piix-sprite>