Pixel pet care screen

Build brief for a coding agent. Rebuild this piece in the reader’s stack. If they haven’t said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don’t “improve” them.

What it is

The home screen of a fictional pocket-pet game, Burrowpal. Tuft, a round peach creature with a leaf sprout, stands on a pixel meadow under a banded sky. Below sit three segmented meters (Fed, Joy, Energy), a three-line log in a terminal font, and three chunky Feed, Play and Sleep buttons in the thumb zone. Everything is on a 4px grid with hard 4px shadows and no blur; every motion runs on steps(), so the pet moves like a handheld sprite, not a tween. The detail worth copying is how gentle it is: meters never drift below 3 of 10, the pet is “a little peckish”, never sad, and pressing Feed when Tuft is full gets a tummy pat, not a warning.

The style is pixel on a custom game language (not iOS or Material): cream plates with 4px plum borders, the pet drawn as a 16 × 14 sprite at 12px per pixel.

Reference behaviour

1. Initial state, 18:40 on day 12. Day sky, sun top right, two clouds drifting right in 2px steps. A cream speech plate reads “cosy and curious”. Meters read Fed 6/10, Joy 7/10, Energy 5/10. The log shows, newest first: “18:40 Tuft is watching the clouds.”, “18:18 Tuft found a shiny pebble.”, “18:00 Tuft woke from a nap by the pond.”
2. Idle: Tuft bobs 4px every 600ms (steps(1,end)) and blinks for 256ms every 3.2s (a two-frame sprite strip, the blink frame shown from 92% to 100%).
3. The in-game clock moves one minute every 1.5s. Every 20 game minutes Fed drops one segment if it is above 3, otherwise Joy does. Nothing ever goes below 3.
4. Feed: a pixel sunberry drops from above the pet into its mouth in 6 steps over 600ms. The sprite switches to the two-frame munch (mouth open, cheeks puffed) at 360ms per cycle. Fed rises by 3 (cap 10); each newly lit segment pops up 4px for one step. The log adds “Tuft munched a sunberry.” After 1.8s Tuft returns to idle. If Fed is already 10, Tuft does the happy pose and the log says “Tuft is full and patted its tummy.”
5. Play: Joy +3 (cap 10), Energy −1. Tuft hops (−24px, 0, −12px, 0 at 160ms steps, three times) with ^ ^ eyes and an open mouth. Three pixel hearts rise 72px in 6 steps, 140ms apart. The log reads “Tuft chased the pebble. Joy 10/10.” If Energy is 1 or less, Tuft yawns instead: Joy +1, no energy cost, “Tuft yawned mid-game. A nap would help.”
6. Sleep: the night sky fades in over 800ms in 4 steps, the sun sinks 240px, the crescent moon rises, six 4px stars twinkle, the ground darkens to 55%, a “z Z” drifts up and to the right. Tuft closes its eyes and its sprout droops every 800ms. The button turns yellow and reads Wake (aria-pressed="true"). The plate reads “dreaming of berries”. Energy refills one segment per 1.5s up to 10.
7. While asleep, Feed and Play stay enabled and only log “Shh. Tuft is dreaming. Wake first?”
8. Wake: the clock jumps to 07:24 the next day, the day counter becomes 13, the sky turns back to day, Tuft stretches with the happy pose and hearts, and the log reads “Morning! Tuft stretched, energy 10/10.”
9. The mood plate always reflects the state: asleep “dreaming of berries”, Fed under 4 “a little peckish”, Energy under 3 “getting sleepy”, Joy over 8 “bouncy and bright”, otherwise “cosy and curious”.
10. The log keeps three lines; the newest is full cream with a 8px yellow pixel bullet, older lines are #CDBFD8.

Structure

390 × 844
┌──────────────────────────────────────┐ 0
│ sky bands (44% / 24% / 32%)          │
│ ┌ Tuft  day 12            18:40 ┐    │ 58  header plate, 4px border + 4px shadow
│ └────────────────────────────────┘    │
│             [cosy and curious]   (sun)│ 132 mood plate with pixel tail
│               ▄██████▄                │ 212 pet 192×168 (16×14 px @12)
│              █ ◘    ◘ █               │
│              █  ▀▀▀▀  █               │
│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ grass ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ │ 376 ground 76px (16 grass, 8 dark, dirt)
├──────────────────────────────────────┤ 452
│ ┌──────────────────────────────────┐ │ 468 needs panel, 16px inset
│ │ (●) Fed     ■■■■■■□□□□     6/10 │ │ rows 32px: 24 / 68 / 1fr / 52
│ │ (♥) Joy     ■■■■■■■□□□     7/10 │ │
│ │ (⚡) Energy  ■■■■■□□□□□     5/10 │ │
│ └──────────────────────────────────┘ │
│  18:40  Tuft is watching the clouds. │ log, 3 lines × 24px
│  18:18  Tuft found a shiny pebble.   │
│  18:00  Tuft woke from a nap by…     │
│ ┌────────┐ ┌────────┐ ┌────────┐     │ 714 actions, 3 × 108 × 96, gap 12
│ │ berry  │ │  ball  │ │  moon  │     │
│ │  Feed  │ │  Play  │ │ Sleep  │     │
│ └────────┘ └────────┘ └────────┘     │ 810
│ 34 home indicator                    │ 844
└──────────────────────────────────────┘

• <main class="app">: flex column, min-height:800px.
• <section class="scene" aria-label="Tuft's meadow">, 452px tall: two .sky layers (day and night), sun div, moon SVG, two clouds, six stars, <header class="top"> with <h1>Tuft</h1>, age and clock, <p class="mood">, .pet[role=img] containing .window > svg.strip, the Zz, the ground.
• <section class="panel" aria-label="Needs"> with three .meter rows; each bar is div.segs[role=meter] with ten <i> segments.
• <ol class="log" aria-live="polite">, three <li> with <time> and text.
• <nav class="actions" aria-label="Care"> with three <button class="act">; Sleep has aria-pressed.

Tokens

:root {
  /* ground and plates */
  --plum: #2B1E3A;        /* app background, borders, hard shadows, sprite outline */
  --plum-deep: #170F21;   /* action button drop */
  --cream: #F6EBD3;       /* plates, panel, buttons, newest log line */
  --cream-2: #E9D9B6;     /* outer 4px ring on panel and buttons */
  --ink: #2B1E3A;         /* text on cream (13.4:1) */
  --ink-2: #5A4466;       /* secondary text on cream (7.6:1) */
  --log-old: #CDBFD8;     /* older log lines on plum (9.4:1) */
  --yellow: #FFD25A;      /* log times, newest bullet, sun, Wake button, focus ring */
  /* meters */
  --fed: #E07A2E; --joy: #D9487A; --energy: #2E8C86; --empty: #D8C59F;
  /* sky bands */
  --day-1: #8ED0F0; --day-2: #A9DCF2; --day-3: #C8E9F4;
  --night-1: #1A1C46; --night-2: #23286A; --night-3: #2E3784;
  --grass: #5FAF4E; --grass-2: #4A9440; --dirt: #8A5A3B;
  /* sprite */
  --pet-body: #F2A65A; --pet-belly: #FBE3B6; --pet-cheek: #EC6F8C; --pet-mouth: #6B2340; --pet-leaf: #4FA35A;
  /* type */
  --display: "Pixelify Sans", system-ui, sans-serif;
  --mono: "VT323", ui-monospace, monospace;
  --fs-name: 24px; --fs-button: 20px; --fs-label: 18px; --fs-clock: 26px; --fs-log: 20px; --fs-value: 22px;
  /* grid */
  --px: 4px; --pet-px: 12px; --gutter: 16px;
  --scene-h: 452px; --pet-w: 192px; --pet-h: 168px; --button-h: 96px; --meter-h: 32px; --seg-h: 16px; --seg-gap: 4px;
  /* edges: no radius, no blur */
  --radius: 0;
  --hard: 4px 4px 0 var(--plum);
  --button-edge: 0 0 0 4px var(--cream-2), 6px 6px 0 4px var(--plum-deep);
  /* motion: always steps() */
  --t-bob: 1200ms; --t-blink: 3200ms; --t-hop: 640ms; --t-munch: 360ms; --t-sleep: 1600ms;
  --t-sky: 800ms; --sky-steps: steps(4, end); --t-hearts: 960ms; --t-berry: 600ms; --t-clock: 1500ms;
}

Typography

Role	Family	Size / line	Weight	Tracking	Case
Pet name	Pixelify Sans	24px / 1	700	0	title
Button label	Pixelify Sans	20px / 1	700	0	title
Meter label	Pixelify Sans	18px / 1	600	0	title
Zz	Pixelify Sans	24px / 1	700	0	mixed
Clock	VT323	26px / 1, tabular	400	0.04em	—
Meter value	VT323	22px / 1	400	0	—
Mood plate	VT323	22px / 1	400	0	lower
Log line	VT323	20px / 24px	400	0	sentence
Age	VT323	20px / 1	400	0	lower

Turn off font smoothing (-webkit-font-smoothing:none) and set image-rendering:pixelated on the body so the edges stay hard.

Motion

What	Trigger	Property	From → to	Duration	Timing	Reduced motion
Bob	idle	translateY	0 → 4px	1200ms loop	steps(1,end) at 50%	off
Blink	idle	strip translateX	0 → −192px	3200ms loop, frame 2 from 92%	steps(1,end)	off, open eyes
Munch	Feed	strip translateX	0 → −384px	360ms loop, 1.8s total	steps(2,end)	first frame held
Berry drop	Feed	translateY	0 → 176px, fade at end	600ms	steps(6,end)	hidden
Hop	Play, Wake	translateY	0, −24, 0, −12px	640ms × 3	steps(1,end)	off
Happy frames	Play, Wake	strip	2 frames	320ms loop	steps(2,end)	first frame
Hearts	Play, Wake	translateY, opacity	0 → −72px, 1 → 0	960ms, 140ms stagger	steps(6,end)	hidden
Sleep frames	Sleep	strip	eyes shut, leaf droops	1600ms loop	steps(2,end)	first frame
Night sky	Sleep / Wake	opacity	0 ↔ 1	800ms	steps(4,end)	200ms fade
Sun / moon	Sleep / Wake	translateY	0 ↔ 240px	800ms	steps(4,end)	200ms fade
Stars	asleep	background-color	cream ↔ #8E93D8	2400ms loop	steps(2,end)	static
Zz	asleep	translate	0 → 16px, −32px	2400ms loop	steps(4,end)	static
Clouds	day	translateX	0 → 96px	24s / 32s loop	steps(48,end)	static
New segment	meter rises	translateY	0 → −4px → 0	360ms	steps(2,end)	off
Button press	:active	translate	0 → 4px, 4px	80ms	steps(1,end)	same

Never use ease, cubic-bezier or blur in this piece. Every move lands on a whole 4px step.

States

• Idle: open eyes with a 1px (12px) white highlight, small mouth, bob and blink.
• Eating: mouth opens to 4 pixels wide, then closes with puffed cheeks.
• Happy: eyes become carets (^ ^), mouth opens with a pink tongue, sprout splits.
• Asleep: 3-pixel closed-eye lines, no mouth, sprout droops on frame 2; Sleep button is --yellow and reads Wake.
• Meter: lit segments use the meter colour, empty ones --empty; the floor is 3 for Fed and Joy.
• Focus-visible: 4px --yellow outline, 2px offset, square.
• Pressed: button moves 4px right and down, covering its drop.
• Full: Feed at 10 plays happy instead of eating; Play at Energy ≤ 1 yawns and costs nothing.

Accessibility

• The pet is role="img" and its aria-label changes with the pose: “Tuft, looking around”, “munching a sunberry”, “hopping with joy”, “curled up asleep”.
• Each bar is role="meter" with aria-valuemin="0", aria-valuemax="10", aria-valuenow and aria-valuetext="6 of 10", labelled by its visible label.
• The log is an <ol aria-live="polite">, so each action is read once in words.
• Sleep is a toggle button with aria-pressed; its text changes Sleep ↔ Wake.
• Tab order: Feed, Play, Sleep. Enter and Space press them.
• Contrast: plum on cream 13.4:1, --ink-2 on cream 7.6:1, cream on plum 13.4:1, --log-old on plum 9.4:1, yellow on plum 11.2:1. The mood and header text always sit on solid cream plates, never on the sky.
• Hit targets: buttons 108 × 96px.

Responsive rules

• At 360 wide: buttons become 101px wide; meter bars shrink (1fr), segments stay 16px tall; the pet stays 192px and centred.
• The pet pixel size stays a whole number (12px). On tablet, use 16px pixels and cap the column at 430px.
• Shorter than 800px: the app keeps min-height:800px and scrolls; the buttons stay last.
• Taller phones: extra height opens between the log and the buttons (margin-top:auto).

Acceptance checklist

Always

• Every animation uses steps(); no element has a blur, a radius or an eased tween.
• The sprite is a strip of frames inside a 192 × 168 window with overflow:hidden, and each state swaps the strip.
• Each action changes both the pet’s animation and the meters, and writes one log line.
• Meters are ten segments with 4px gaps and never decay below 3.
• Sleep switches the sky to night in four visible steps and Wake switches it back.
• No sad, sick or dying state exists; full or tired gets a friendly alternative.
• Text over the sky sits on a solid cream plate.
• Reduced motion holds each state on its first frame and drops particles, hops and drifts.
• document.documentElement.scrollWidth is 390.

This demo

• Start at 18:40, day 12, Fed 6, Joy 7, Energy 5, mood “cosy and curious”.
• Feed +3 Fed; Play +3 Joy and −1 Energy; asleep refills 1 Energy per 1.5s.
• Wake jumps to 07:24 and day 13.
• Pet is 16 × 14 pixels at 12px, peach #F2A65A with a #4FA35A sprout.

Implementation notes

1. Draw the sprite from strings and merge runs. Keep each frame as 14 strings of 16 characters, and write one <path> per horizontal run. Frames sit side by side in one SVG (viewBox="0 0 32 14", 384 × 168, shape-rendering="crispEdges").

const svg = (frames) => frames.map((rows, f) => rows.map((r, y) => {
  let out = '', x = 0;
  while (x < r.length) {
    const ch = r[x]; let n = 1; while (r[x + n] === ch) n++;
    if (ch !== '.') out += `<path fill="${C[ch]}" d="M${f * 16 + x} ${y}h${n}v1h-${n}z"/>`;
    x += n;
  }
  return out;
}).join('')).join('');

2. Hold a frame, then jump. A blink is two frames where the second shows only briefly. Use steps(1,end) between keyframes so each value holds until the next stop:

.strip { animation: blink 3.2s steps(1, end) infinite; }
@keyframes blink { 0% { transform: translateX(0) } 92% { transform: translateX(-192px) } 100% { transform: translateX(-192px) } }
.pet.eat .strip { animation: flip2 360ms steps(2, end) infinite; }
@keyframes flip2 { to { transform: translateX(-384px) } }

3. Night as a stepped crossfade. You can’t transition a gradient, so stack a second banded sky and step its opacity:

.sky { background: linear-gradient(#8ED0F0 0 44%, #A9DCF2 44% 68%, #C8E9F4 68% 100%); }
.sky.night { background: linear-gradient(#1A1C46 0 44%, #23286A 44% 68%, #2E3784 68% 100%);
  opacity: 0; transition: opacity 800ms steps(4, end); }
.app.asleep .sky.night { opacity: 1; }

Common mistakes: scaling the sprite with transform: scale() (it blurs at fractional sizes; draw it at 12px per pixel instead), letting meters hit zero and guilt the player, and putting the mood text straight on the sky.