# Pixel Quest

A 16-bit game screen at dusk: each step a stage the small hero walks into, progress an XP bar, the hard part a boss, tips typed out in dialogue boxes.

## Essence, and what it is not

- A game screen of 480 × 270 pixels, each exactly 4 × 4: every shape, word and move lands on that grid. Nothing smooth, blended or rotated.
- A how-to is a run through a level: each step a numbered stage, finishing it a clear, the hardest step a boss with a red HP bar.
- Progress fills where you see it: XP cells, items in the status bar's slots, a quest log at the end.
- Words belong to the game: stage cards, a typing dialogue box, pixel labels with an ink edge.

Not a CRT terminal (no scan lines or glow), not a flat modern game UI (no gradients, rounded cards, vector icons), not Screen Desk (a device is a sprite in the game, and nothing zooms).

## Ground and material

`level.tsx`, one global part: a dithered dusk sky, a moon, ridges and trees in parallax, a grass floor at y 190 in 16-pixel tiles, earth dithering to ink under the captions, a signpost per stage. Parts draw in game pixels through `pixel.ts` (`Screen`, `Sprite`, `Words`, `Window`): an svg scaled by 4, crisp edges.

## Colour roles

- `data` (gold): progress and reward only: XP, stage cards, the clear, loot, the dialogue tab, stars.
- `bad` (coral): the boss alone, its HP and signpost; the dusk turns red while it stands.
- `good` (mint): a mark to aim at, the next quest. `text` (bone): words, frames. `muted`, `faint`: quiet labels, empty slots. `panel`: window fill.
- The world is low and cool, so gold and coral are the brightest things; the hero is the only blue. Art colours are fixed in `C` (`pixel.ts`) and step between whole palettes, never faded.

## Type and captions

Two pixel faces, only at multiples of their grids. Silkscreen (`display`, 8-unit grid): 8 (32 px) for labels, 16 to 32 bold for bursts, stage cards, titles. Fusion Pixel 12px (`sans`, `mono`, 12-unit grid): 12 (48 px) for dialogue and rows. Words over the world get an eight-way ink edge; titles a gold-dark drop. Chinese: Fusion Pixel 12px zh-Hans, the same face. The caption is the game's text bar: Fusion Pixel 48 px bone on the window fill, a 4 px bone rule above and below, a 4 px ink drop under each letter.

## Motion

On twos: twelve drawings a second (`twos`, `steps`), whole-pixel jumps; tweens are linear and the part steps them. Things fall and bounce in (cards, letters, chests, the boss), windows unfold in four steps, words type. They leave by blinking out or an ordered dither, never a fade. Big moments are pixels too: diamond wipes, ring blasts, a one-drawing white flash, bouncing gold, a pillar of light; an impact jolts the screen 3, 2, 1 pixels.

## Composition and framing

The status bar owns the top 32 pixels, the floor is y 190, the hero left of centre (x 120). The step's picture is a large window on the right half (the left when the boss holds the right): the move drawn big in it, the hero small in the world. Text 22 px in. A tutorial's device stands right, its pointer on the step's row. A dialogue box closes before the clear. Never zoom.

## Sound

Optional, synthesised: a blip per letter, a chime on a clear, a thud for the boss; short, under the narration. No music bed.

## Components

- **close** — Quest log (`react/parts/results.tsx`): The run looked back on: a window lists the stages beaten, a gold star each, the last row the next quest. Fits: the end of a how-to or a lesson: the steps done, and what to learn next
- **compare** — Boss (`react/parts/boss.tsx`): The hard part as a horned one-eyed orb with a red HP bar: its shadow warns, it crashes down, flashes on each blow, and goes up in blasts and gold. Fits: the step people fail at; one a film
- **ground** — Level (`react/parts/level.tsx`): The tiled world at dusk: dithered sky, parallax ridges and trees, a grass floor, a signpost per stage. Fits: every scene, one global part: scroll 480 a stage, dusk for the boss, shake on impact
- **mark** — Hero (`react/parts/hero.tsx`): The small hero in a blue cap, the viewer's stand-in: idles, walks to the next stage, holds out its hands to act the step, hops on a clear. Fits: the learner doing each step; one hero all film long
- **open** — Title screen (`react/parts/title.tsx`): The title as a game's: gold letters drop in one by one, a glint runs across them. Fits: the opening of a how-to or a lesson
- **quote** — Dialogue box (`react/parts/dialog.tsx`): A window with a cut-corner frame and a gold name tab; its words type in, and a gold pip hops when done. Fits: a step's one rule, a tip, a command; a few words, never the narration
- **steps** — Status bar (`react/parts/hud.tsx`): The ink bar on top: the stage, an XP bar in gold cells, slots that keep the items won. Fits: progress through the steps and what was learnt
- **steps** — Device screen (`react/parts/screen.tsx`): A pixel phone or monitor with an app on screen; a gold pointer clicks the row the step names and pins its number. Fits: a tutorial step on a device: tap Start, open Settings
- **term** — Loot chest (`react/parts/loot.tsx`): A chest springs open; the item rises with its name and hops into its slot in the bar. Fits: what a step gives: a new term, a rule, a shortcut learnt
- **title** — Stage card (`react/parts/stage-card.tsx`): STAGE and a number in big gold letters drop in and bounce, the step's name typed beneath; it blinks out when play starts. Fits: the start of each step or each part of a lesson
- **transition** — Clear burst (`react/parts/clear.tsx`): A ring of gold pixels bursts, sparks fly, the word hops in; a level up adds a pillar of light. Fits: the word that finishes a step
- **transition** — Diamond wipe (`react/parts/wipe.tsx`): Ink diamonds sweep across the world tile by tile, close it, and open on the next stage. Fits: the cut between two steps; change the world while it is closed

## Native moves

- **Clear the stage.** On the word that finishes a step a gold ring bursts, CLEAR! hops in and the hero jumps. *Fits content like:* a step done; a test passing.
- **Fill the XP bar.** A gold cell fills, two pixels at a time, as a step is done. *Fits content like:* three of five steps; setup half-way.
- **Type the rule.** A dialogue box unfolds and types the step's one rule, its key word in gold. *Fits content like:* "peak, then throw"; "save first".
- **Diamond wipe.** Ink diamonds sweep over the world; the next stage's card drops onto the black; the wave opens on the new place. *Fits content like:* one step to the next; theory to practice.
- **Beat the boss.** Its shadow grows, it crashes down in dust, the sky turns red; its HP drops per blow; beaten, it bursts, the screen flashes white, gold sprays, and light lands on the hero: LEVEL UP! *Fits content like:* the third ball; a merge conflict.
- **Loot to the bar.** A chest opens on the word that names what was learnt; the item hops into a slot of the status bar and stays. *Fits content like:* a term; a shortcut.
- **The quest log.** A window lists the stages beaten, a star each, and the next quest in mint. *Fits content like:* a recap; what next.

## Avoid: pitfalls

- A half pixel or a font size off its grid mixes pixel sizes. Fix: whole pixels, Silkscreen at 8k, Fusion at 12k.
- A smooth tween or a fade reads as modern UI. Fix: `steps`, `twos`, blink-outs, dither.
- Gold as decoration. Fix: only progress is gold.
- A known game's marks (blocks, pipes, coins, heroes). Fix: this motion's own sprites.
- The boss as a joke. Fix: it is the step people fail at.

## Freedom in each work

Each film decides its stages, boss (or none), items, windows, opening and ending. Three structures: a recipe as three stages and a boss (the step that goes wrong); onboarding as one long stage whose chests are the tools set up, ending on the quest log; a lesson as a boss fight from the start, each fact a blow, the stages as a recap.