# Pixel pedometer
> A step counter with a pixel cat to look after: big pixel digits, a goal bar, hearts and a walk button.
A phone screen in a pixel-art style. Today’s steps in large pixel digits fill a lime bar towards the goal, and a little cat sits on a dotted line below. Tap or rub the cat and it shuts its eyes and smiles, a heart rises and it earns experience; press Walk together and it steps along while the count runs up. Every letter is drawn on a pixel grid, with no font files.
A React component by Bruno Delorence: https://brunodelorence.com/components/pixel-pedometer. MIT License, Copyright (c) 2026 Bruno Delorence.
Category: Mobile · Indicators.
## Anatomy
1. **Goal**: The day’s target in pixel digits, with a lock and its deadline in small print under it.
2. **Count**: Today’s steps in big block digits, one SVG path redrawn on every step, with the real number beside it for screen readers.
3. **Progress bar**: A progressbar with an ink edge; its lime fill grows by scaleX to the share of the goal, 500 ms.
4. **Pet**: The cat is a button. A tap or a rub shuts its eyes, sends a heart up, fills an empty heart and earns 5 XP.
5. **Name and stage**: The pet’s name in pixel capitals, and its stage of life and day under it.
6. **Hearts**: Three hearts, full or outlined: how much attention the pet has had. Read as one image.
7. **Walk button**: A toggle on a 3-point ledge it presses into. While walking, steps count fast and the XP earns its bonus.
8. **Experience**: XP over the next stage’s goal, what is left, and a track of 29 slots: blocks up to the marker, dots after.
## When to use
- A playful daily-goal screen on a phone: steps, water, minutes of practice, with one big number.
- A habit app where a pet or mascot gives the goal a reason, and petting it is a small reward.
- A retro or game-like brand, where pixel type is the voice and no font files should load.
- One goal and one action on the screen: today’s count, its bar and a single “do it” button.
## When not to use
- Health data people read closely (heart rate, sleep stages). Use a plain chart with real type and axes.
- Several metrics side by side. Use a dashboard of cards, each with its own number.
- Text that changes language or length freely: the pixel fonts cover A–Z, digits and a few signs.
- A sober or clinical product. The pet and its hearts read as a game; use a progress ring and a list.
- A desktop page. It is drawn as a 390-point phone screen; on a wide layout use a stat card.
## Installation
Install it with the shadcn CLI, into components/pixel-pedometer of any React project:
```sh
npx shadcn@latest add https://brunodelorence.com/r/pixel-pedometer.json
```
Or copy all the source files below into one folder of your project. Either way it needs React 19.2 and a bundler with CSS Modules (Next.js, Vite).
It has a dark colour scheme. Its colours are CSS light-dark() pairs, kept inside @supports so that builds which rewrite light-dark() for older browsers leave them alone: it follows your page’s color-scheme (light unless the page sets one) or its colorScheme prop, with nothing to configure. Browsers without light-dark() show it light.
## Usage
```tsx
import { PixelPedometer } from './pixel-pedometer';
export function TodayScreen() {
return (
);
}
```
## States
- **Default**: Part way to the goal, all three hearts full, the cat breathing a pixel up and down.
- **Petted**: Eyes shut and mouth up while it is petted; it settles 1.1 s after the last touch.
- **Walking**: The button says Walking and its bonus blinks; steps tick in every 260 ms and the cat steps along.
- **Missed attention**: One heart full, two outlined. Each pet fills one back.
- **Goal reached**: The bar is full at 100%; the count keeps going past the goal.
- **Nearly the next stage**: The track is all blocks up to its marker, a few hundred XP left.
- **Dark**: A near-black page with light type; the lime stays the lime.
## How it works
- Every word and number is a pixel font written as rows of characters: four of them, a block face for the count (6 by 10), a lighter one for the goal and the percentage, a heading face and a 5 by 7 monospace for the small print. A line of text becomes one SVG path, a rectangle per run of lit pixels, scaled by its viewBox to its size in points; the real text sits beside it for screen readers.
- The phone is designed in points, as a phone screen is: --pt is one point in px, the largest that fits the stage (0.82 px at most), so the 390 by 844 screen scales down as one picture on narrow stages.
- The cat is a 48 by 52 sprite in two-pixel lines. Its head is a group of its own that drops a pixel and back every 450 ms, on steps(), so it breathes over a still body. Petted, the open eyes and the little w of a mouth swap for shut eyes and a mouth turned up, and the head nuzzles faster.
- A tap pets it once; a press that rubs keeps it pleased and counts another pet every 650 ms. Each pet adds 5 XP, fills an empty heart and sends a small heart up in nine steps.
- The walk button stands on a 3-point ledge of its own edge colour and presses down into it. Walking, the steps come in every 260 ms, the front legs lift in turn, the shoe stomps and the bonus blinks.
- The experience track is two repeating gradients in 11.7-point slots: blocks up to a marker and dots after it, with the stage’s name under the marker.
- While on screen and untouched, a demo plays: the day’s steps count up from zero and the bar fills, steps keep ticking in, a heart empties, then a finger pets and rubs the cat, starts a walk and stops it. Any real input hands it to the reader; it stops off screen and under reduced motion.
## API reference
- **steps** (`number`, default `1320`): Today’s steps so far.
- **goal** (`number`, default `8000`): The day’s goal, in steps.
- **deadline** (`string`, default `'By tmrw 19:30'`): When the goal is due, written under it.
- **petName** (`string`, default `'Bean'`): The pet’s name.
- **stage** (`string`, default `'Kid'`): The pet’s stage of life, under its name and under the marker.
- **day** (`number`, default `1`): The day of that stage.
- **nextStage** (`string`, default `'Adult'`): The stage the experience leads to.
- **xp** (`number`, default `16273`): The pet’s experience.
- **xpGoal** (`number`, default `50000`): The experience the next stage needs.
- **hearts** (`number`, default `3`): Full hearts, out of three.
- **onPet** (`(xp: number) => void`): Called on each pet, with the experience the pet now has.
- **onWalkChange** (`(walking: boolean) => void`): Called when a walk starts or stops.
- **defaultWalking** (`boolean`): Opens walking, the steps ticking in fast. Setting it turns the demo off.
- **defaultMood** (`'calm' | 'happy'`): Opens with the cat calm or pleased, held until it is petted. Setting it turns the demo off.
- **autoplay** (`boolean`, default `true`): While on screen and untouched, the steps tick in and a finger pets the cat and goes for a walk.
- **colorScheme** (`'light' | 'dark' | 'system'`): Light or dark colours, or the reader’s; without it, the page’s color-scheme.
- **className** (`string`): A class for the stage.
## Accessibility
- Each pixel line is an SVG hidden from screen readers, with its real text beside it: “1,320 steps”, “Goal 8,000 steps, by tmrw 19:30”, the pet’s name, stage and experience.
- The bar is a progressbar with its percentage. The hearts are an image labelled “3 of 3 hearts”.
- The cat is a button (“Pet Bean”): Enter or Space pets it as a tap does. The walk button is a toggle with aria-pressed.
- A polite live region says when the pet purrs and the XP it earned, and when a walk starts or pauses; the ticking count is not announced.
- Both buttons show a focus ring. The demo finger is hidden from screen readers and stops on any key or pointer.
- Under reduced motion the demo does not play, the cat holds still, no heart rises and the bar and button change without transitions.
## Source
### pixel-pedometer/pixel-pedometer.tsx
```tsx
// Copyright (c) 2026 Bruno Delorence. MIT License.
'use client';
import {
useCallback,
useEffect,
useEffectEvent,
useMemo,
useRef,
useState,
type CSSProperties,
type PointerEvent as ReactPointerEvent,
} from 'react';
import {
BLOCK,
CAT,
HEADING,
HEART,
HEART_OUTLINE,
LOCK,
MEDIUM,
MONO,
SHOE,
layout,
toPath,
type PixelFont,
} from './pixel-font';
import { useAutoplay } from './use-autoplay';
import styles from './pixel-pedometer.module.css';
/*
* Pixel pedometer: a step counter with a pet, on a phone drawn in CSS. Today's steps in big pixel
* digits, the goal and its deadline, a progress bar, a pixel cat that likes to be petted, its
* hearts, a "walk together" button and the pet's experience on its way to the next stage.
*
* - Every word and number is drawn on a pixel grid (pixel-font.ts): one SVG path per line of text,
* scaled by its viewBox, with the real text beside it for screen readers. No font files.
* - The phone is designed in points, as a phone's screen is: --pt is one point in px, the largest
* that fits the stage's width, so the 390-point-wide screen scales as one picture.
* - The cat is two layers over one sprite: the head bobs a pixel over the body as it breathes.
* Tapping or rubbing it shuts its eyes and turns its mouth up, a heart rises from it, a heart
* fills if one was empty and it earns 5 XP.
* - The walk button presses into its shadow. While walking, steps count up fast, the cat steps
* along, and the experience earns its bonus.
* - While on screen and untouched, a demo plays: the day's steps count up and the bar fills, the
* steps keep ticking, a finger pets the cat, then starts and stops a walk. Any real input hands
* it over to the reader.
* - Light or dark: every colour is a light-dark() token in the CSS.
*/
/** XP for each pet, and how long the cat stays pleased after the last one. */
const PET_XP = 5;
const PLEASED = 1100;
/** A rub counts as another pet every RUB ms. */
const RUB = 650;
/** How often a step comes in: idly (the phone in a pocket) and walking. */
const IDLE_STEP = 900;
const WALK_STEP = 260;
/** The day's steps count up over INTRO ms the first time the demo plays. */
const INTRO = 1500;
/** The experience bar's slots. */
const SLOTS = 29;
const format = (value: number) => Math.round(value).toLocaleString('en-US');
type Size = [x: number, y: number];
/** A line of pixel text: an SVG drawn `size` points per pixel; screen readers skip it. */
function Pixels({
font,
text,
size,
className,
}: {
font: PixelFont;
text: string;
size: Size;
className?: string;
}) {
const { d, width, height } = useMemo(() => layout(font, text), [font, text]);
return (
);
}
/** A pixel drawing (rows of '#'), `size` points per pixel. */
function Sprite({ rows, size, className }: { rows: string[]; size: Size; className?: string }) {
const d = useMemo(() => toPath(rows), [rows]);
const width = rows[0].length;
return (
);
}
function StatusIcons() {
return (
);
}
type Float = { id: number; x: number };
export function PixelPedometer({
steps: initialSteps = 1320,
goal = 8000,
deadline = 'By tmrw 19:30',
petName = 'Bean',
stage = 'Kid',
day = 1,
nextStage = 'Adult',
xp: initialXp = 16273,
xpGoal = 50000,
hearts: initialHearts = 3,
onPet,
onWalkChange,
defaultWalking,
defaultMood,
autoplay = true,
colorScheme,
className = '',
}: {
/** Today's steps so far. */
steps?: number;
/** The day's goal, in steps. */
goal?: number;
/** When the goal is due, under it. */
deadline?: string;
/** The pet's name. */
petName?: string;
/** The pet's stage of life, and the day of it. */
stage?: string;
day?: number;
/** The stage the experience leads to. */
nextStage?: string;
/** The pet's experience, and the experience the next stage needs. */
xp?: number;
xpGoal?: number;
/** Full hearts, out of three. */
hearts?: number;
/** Called on each pet, with the experience it now has. */
onPet?: (xp: number) => void;
/** Called when a walk starts or stops. */
onWalkChange?: (walking: boolean) => void;
/** Opens walking (the steps tick in fast); setting it turns the demo off. */
defaultWalking?: boolean;
/** Opens with the cat calm or pleased (held until it is petted); setting it turns the demo off. */
defaultMood?: 'calm' | 'happy';
/** While on screen and untouched, the steps tick and a finger pets the cat and goes walking. */
autoplay?: boolean;
/** Light or dark colours, or the reader's ('system'); without it, the page's color-scheme. */
colorScheme?: 'light' | 'dark' | 'system';
className?: string;
}) {
const { ref: root, playing, visible, reduced, take } = useAutoplay(6000);
const [steps, setSteps] = useState(initialSteps);
const [xp, setXp] = useState(initialXp);
const [hearts, setHearts] = useState(Math.max(0, Math.min(3, initialHearts)));
const [walking, setWalking] = useState(defaultWalking ?? false);
const [pleased, setPleased] = useState(defaultMood === 'happy');
const [floats, setFloats] = useState([]);
const [message, setMessage] = useState('');
/** The demo's finger: where it is (in points on the screen), shown, pressing. */
const [touch, setTouch] = useState({ x: 195, y: 520, shown: false, down: false });
/** The walk button pressed by the demo's finger. */
const [demoPress, setDemoPress] = useState(false);
const screen = useRef(null);
const petButton = useRef(null);
const walkButton = useRef(null);
const pleasedTimer = useRef(0);
const lastPet = useRef(0);
const floatId = useRef(0);
const introDone = useRef(false);
const xpRef = useRef(xp);
useEffect(() => {
xpRef.current = xp;
}, [xp]);
/** An opening state asked for holds the demo off. */
const demo = autoplay && defaultWalking === undefined && defaultMood === undefined && playing;
/** Repeats are made to differ, so screen readers announce them again. */
const announce = (text: string) => setMessage((now) => (now === text ? `${text} ` : text));
const pet = useEffectEvent((silent = false) => {
setPleased(true);
window.clearTimeout(pleasedTimer.current);
pleasedTimer.current = window.setTimeout(() => setPleased(false), PLEASED);
const now = performance.now();
if (now - lastPet.current < 350) return;
lastPet.current = now;
const next = xpRef.current + PET_XP;
setXp((value) => value + PET_XP);
setHearts((count) => Math.min(3, count + 1));
const id = ++floatId.current;
setFloats((list) => [...list.slice(-3), { id, x: (id % 3) - 1 }]);
window.setTimeout(() => setFloats((list) => list.filter((float) => float.id !== id)), 1200);
onPet?.(next);
if (!silent) announce(`${petName} purrs. Plus ${PET_XP} XP.`);
});
const setWalk = useEffectEvent((on: boolean, silent = false) => {
setWalking(on);
onWalkChange?.(on);
if (!silent) announce(on ? `Walking together with ${petName}.` : 'Walk paused.');
});
useEffect(() => () => window.clearTimeout(pleasedTimer.current), []);
// Steps come in: slowly while the demo plays (the phone in a pocket), fast while walking.
const ticking = visible && (walking || demo);
useEffect(() => {
if (!ticking) return;
const timer = window.setInterval(
() => {
setSteps((count) => count + (walking ? 1 + Math.round(Math.random()) : 1));
if (walking) setXp((value) => value + 1);
},
walking ? WALK_STEP : IDLE_STEP,
);
return () => window.clearInterval(timer);
}, [ticking, walking]);
// The demo: a finger pets the cat, then starts a walk and stops it, over and over.
const runDemo = useEffectEvent(async (signal: AbortSignal) => {
const wait = (ms: number) =>
new Promise((resolve, reject) => {
const timer = window.setTimeout(resolve, ms);
signal.addEventListener('abort', () => {
window.clearTimeout(timer);
reject(signal.reason);
});
});
/** The middle of an element, in points on the screen, nudged by dx, dy points. */
const at = (element: Element | null, dx = 0, dy = 0) => {
const frame = screen.current?.getBoundingClientRect();
const box = element?.getBoundingClientRect();
if (!frame || !box) return { x: 195, y: 420 };
const scale = frame.width / 390 || 1;
return {
x: (box.left + box.width / 2 - frame.left) / scale + dx,
y: (box.top + box.height / 2 - frame.top) / scale + dy,
};
};
const move = (point: { x: number; y: number }, down = false) =>
setTouch({ ...point, shown: true, down });
if (!introDone.current) {
introDone.current = true;
const target = steps;
const start = performance.now();
setSteps(0);
await new Promise((resolve) => {
const frame = (now: number) => {
if (signal.aborted) {
setSteps(target);
return resolve();
}
const t = Math.min(1, (now - start) / INTRO);
setSteps(Math.round(target * (1 - (1 - t) ** 3)));
if (t < 1) requestAnimationFrame(frame);
else resolve();
};
requestAnimationFrame(frame);
});
if (signal.aborted) return;
}
for (;;) {
await wait(1600);
// The cat has missed some attention: a heart empties.
setHearts((count) => (count === 3 ? 2 : count));
await wait(1200);
const cat = petButton.current;
setTouch((now) => ({ ...now, ...at(cat, 34, -10), shown: false, down: false }));
await wait(60);
move(at(cat, 26, -6));
await wait(420);
move(at(cat, 22, -4), true);
pet(true);
await wait(160);
move(at(cat, 22, -4));
await wait(700);
// A rub, back and forth over its head.
move(at(cat, 8, -26), true);
pet(true);
for (let pass = 0; pass < 4; pass++) {
await wait(260);
move(at(cat, pass % 2 ? 8 : -14, -26), true);
if (pass === 2) pet(true);
}
await wait(260);
move(at(cat, -2, -20));
await wait(900);
// Off for a walk.
const walk = walkButton.current;
move(at(walk, 40, 0));
await wait(620);
move(at(walk, 40, 0), true);
setDemoPress(true);
await wait(150);
setDemoPress(false);
setWalk(true, true);
move(at(walk, 40, 0));
await wait(380);
setTouch((now) => ({ ...now, shown: false }));
await wait(4200);
move(at(walk, 40, 0));
await wait(420);
move(at(walk, 40, 0), true);
setDemoPress(true);
await wait(150);
setDemoPress(false);
setWalk(false, true);
move(at(walk, 40, 0));
await wait(380);
setTouch((now) => ({ ...now, shown: false }));
}
});
useEffect(() => {
if (!demo) return;
const controller = new AbortController();
runDemo(controller.signal).catch(() => {});
return () => {
controller.abort();
setTouch((now) => ({ ...now, shown: false, down: false }));
setDemoPress(false);
};
}, [demo]);
// The reader's hands on the cat: a tap pets it, a rub keeps petting it.
const rubbing = useRef<{ id: number; last: number } | null>(null);
const onPetDown = (event: ReactPointerEvent) => {
if (event.button !== 0) return;
take();
event.currentTarget.setPointerCapture(event.pointerId);
rubbing.current = { id: event.pointerId, last: performance.now() };
pet();
};
const onPetMove = (event: ReactPointerEvent) => {
const rub = rubbing.current;
if (!rub || rub.id !== event.pointerId) return;
setPleased(true);
window.clearTimeout(pleasedTimer.current);
pleasedTimer.current = window.setTimeout(() => setPleased(false), PLEASED);
const now = performance.now();
if (now - rub.last > RUB) {
rub.last = now;
pet();
}
};
const onPetUp = () => {
rubbing.current = null;
};
const ratio = Math.min(1, steps / Math.max(1, goal));
const percent = Math.floor(ratio * 100);
const xpRatio = Math.min(1, xp / Math.max(1, xpGoal));
const filled = Math.max(1, Math.min(SLOTS, Math.floor(xpRatio * SLOTS)));
const remaining = Math.max(0, xpGoal - xp);
const heartList = [0, 1, 2].map((index) => index < hearts);
const stopDemo = useCallback(() => take(), [take]);
return (