🛰️ News Technology
How Pip Was Designed and Animated
Pip is a 26x22 pixel drawing that ships as one 838-byte file and animates without a line of JavaScript. How that was done, and why a news app cared.
By Headlinne Editorial Team · Updated on
Start with the constraint
The brief for Pip had a hard limit attached: he could not make Headlinne measurably slower. News readers arrive on phones, from links, often on bad connections. A mascot is a nice-to-have, and nice-to-haves do not get to cost page speed.
That constraint shaped every decision that followed, and it is the reason the answer was pixel art rather than an illustration or a video.
Why pixel art is the cheap answer
Pip is natively a 26 by 22 pixel drawing. That is 572 pixels — smaller than a favicon. The source artwork was drawn at six times that size, but every one of those larger blocks is a flat six-by-six square of a single colour, which means the upscale carries no extra information and can be reversed exactly.
Reversing it is the whole trick. Once Pip is back at native resolution, the browser is asked to scale him back up with nearest-neighbour filtering — the CSS is image-rendering: pixelated — so he is drawn crisply at any size from one small file. A conventional illustration would need several resolutions to look right on both a phone and a desktop.
One file, twenty frames
Every pose and every frame of animation lives on a single image called a sprite sheet: twenty cells in a row, each 26 by 28 pixels, laid out on a uniform grid.
Because Pip only uses twelve colours, that sheet is stored as a 4-bit indexed PNG — a format that keeps a small palette and spends half a byte per pixel instead of four. The finished file is 838 bytes. Loading Pip is one cached request, and it is smaller than the text of this paragraph rendered as an image would be.
A build script produces it from the original artwork, so the sheet can be regenerated whenever a pose is added rather than being hand-assembled and slowly drifting out of date.
Animating with no JavaScript
Because the frames sit on a uniform grid, animating Pip is a matter of sliding the image behind a fixed window, one cell at a time. CSS can do that on its own with a stepped animation, so there is no timer, no canvas, and no animation library involved.
The practical consequence is that Pip adds no JavaScript to the pages he appears on. That matters most on the Headlinne homepage, which is pre-rendered at build time specifically so that search engines and slow connections get a complete page immediately.
Two small details fell out of the same approach. Pip's idle breathing is a single-pixel bob expressed as a CSS transform rather than a second drawing, which saves a frame and runs on the compositor. And his walk cycle needed the frames left exactly where the artist put them — the bob is drawn into the artwork as a one-pixel shift, so re-centring each frame on its own contents would have flattened the walk into a glide.
Motion is a preference, not a default
Some people get headaches, nausea, or worse from movement on screen, and every operating system offers a setting to ask for less of it. Pip honours it.
With reduced motion enabled, Pip holds a single frame instead of animating, and the appearances that exist purely as decoration — such as the strip where he walks across the homepage — are removed altogether rather than left frozen mid-stride. The information on the page is unchanged; only the movement goes.
Key takeaways
- ✓Pip is natively 26x22 pixels — 572 pixels, smaller than a favicon.
- ✓All twenty frames ship as one 4-bit indexed PNG weighing 838 bytes.
- ✓He animates entirely in CSS, adding no JavaScript to any page he appears on.
- ✓Under a reduced-motion setting he stops animating, and decorative appearances are removed rather than frozen.
Frequently asked questions
Why is Pip pixel art rather than a normal illustration?
Because it is dramatically cheaper to ship and scales cleanly. A 26x22 pixel drawing enlarged with nearest-neighbour filtering looks correct at any size from one tiny file, where a conventional illustration would need several exports to stay sharp across phones and desktops.
How big is Pip really?
The complete sprite sheet — every pose and every animation frame — is 838 bytes, and it is a single cached request. For comparison, that is smaller than most individual icons on a typical web page.
Does Pip slow the site down?
No. He adds no JavaScript, because the animation is pure CSS, and the one image he needs is under a kilobyte. The homepage he appears on is still pre-rendered at build time.
What happens if I have reduced motion turned on?
Pip stops animating and holds a single frame. Appearances that exist only as decoration are removed completely, so you do not get a sprite stalled mid-step. No information is lost either way.
Related Headlinne features
Related reading
Continue learning
Start reading personalized news with Headlinne
Create your free account and build a feed that learns what you care about.