Echo Steel One

By (@joegirl) ·

Echo Steel One - image 1

made it with claude

Tech stack

  • Claude

Prompt

Build the complete, polished, ready-to-ship web game ECHO, a pattern-memory game that plays like a toy music machine, in one go. Do not stop to ask for approval along the way and do not split it into stages for me. Read this whole brief, build the entire project, test it yourself, fix what you find, and hand it back finished. At the end, tell me plainly what you tested and what you could not test.

Context and constraints
It must load instantly, be understood in one second, and feel delightful within 5 seconds.
Static files only: HTML, CSS, JavaScript. No build step, no framework, no external libraries, no backend, no accounts. It must work when index.html is opened from disk and on any static host.
One Google Font is allowed with a safe fallback. Everything else is code: CSS, SVG, canvas, WebAudio. No image or audio files.
Files: index.html (markup, CSS, UI), logic.js (all pure game logic, no DOM, loads in Node), share.js (canvas share card), test/logic.test.js (Node tests), and a _deploy folder at the end containing only what the live site needs.
Style for all text in the game and in comments: short, punchy, natural. Never use em dashes or en dashes anywhere.
DESIGN IDENTITY (follow this exactly, it must look nothing like a neon or dark-mode game)
ECHO looks and feels like a chunky physical toy, a pocket music sampler from an imaginary 1990s toy company. Think warm plastic, rubber pads, a tiny LCD, printed labels. It is light themed, tactile and cheerful.

Overall: a warm off-white and cream "plastic case" (around #EFE6D6 with soft paper texture) sitting on a muted sage or powder-blue desk surface. No dark mode, no neon, no glows, no gradients that look digital. Light comes from the top left with soft, realistic shadows.
The device: the whole game happens inside a rounded-rectangle device body with visible screw heads in the corners, a subtle seam line, a small speaker grille made of dots, and a tiny printed logo "ECHO" with a model number like "EP-90". On wide screens the device sits centered like an object on a table. On phones it fills the screen like the device itself.
Pads: a grid of large rubber pads with rounded corners. Each pad is a muted, pastel, slightly different color (coral, butter yellow, mint, sky, lilac, peach, sage, rose, and so on for 4x4), glossy with a soft highlight on the top edge and a darker inner base. Pads have real depth: they sit raised, and pressing one animates it down with the shadow shrinking, then springing back. When a pad "lights up", it brightens and gains a clear warm inner light plus a small raised ring, not a neon glow.
Display: a small LCD window at the top of the device with a pale green-gray background and dark segment-style digits (draw the 7-segment digits in SVG or CSS yourself) showing the level, plus tiny printed icons for mode and lives. The LCD has a faint pixel grid and ghost segments.
Controls: printed labels in a clean monospaced type like "Space Mono" or "DM Mono", and chunky rounded buttons for START, MODE and SIZE, plus a decorative knob that actually works as the volume control.
Typography: monospaced labels in all caps on the device, with one hand-lettered or marker style accent for friendly messages (for example "Space Grotesk" or a rounded marker font as a fallback to system fonts).
Motion: springy, physical, small. Pads press with a quick squash, the device nudges very slightly on wrong answers like a toy being bumped, and the LCD digits flip rather than fade.
Share card: styled like a cassette tape label or a printed sticker: cream paper, a hand-lettered score, tape-label lines, small printed stamps and a tiny pad grid drawing. Nothing dark.
The game
A pattern-memory game. The machine plays a sequence by lighting pads, each with its own musical note. The player taps the same sequence back. Each round adds one more step. The sequence is a little melody, so the game is a pleasure to listen to even before it gets hard.

Core rules
Grid: 3x3 (9 pads) by default, with a 4x4 option.
Round flow: the machine plays the sequence (light plus note per step). Then the display shows "YOUR TURN" and the player repeats it. If correct, the machine plays a happy flourish, adds one new step to the end and plays the whole sequence again from the start. The sequence starts at length 3.
Mistake: a wrong pad ends the run, except the player has 2 echoes (lives) shown on the LCD. A wrong pad costs one echo, plays a low buzz, and replays the same sequence so the player can try again. When echoes run out, the run ends.
Tempo: the playback speed starts relaxed and speeds up gradually with level, up to a limit so it stays fair.
Input timeout: if the player waits more than 6 seconds on their turn without tapping, replay the sequence once and keep waiting (no penalty the first time per round).
Hint: a REPLAY button replays the current sequence once, limited to 3 uses per run (show the count on the device). It does not cost an echo.
Score: 1 point per step the player correctly repeats, plus a bonus of 5 for a round done with no mistakes. Show the level (the sequence length) and the score.
Modes (toggle with the MODE button)
Classic: repeat the sequence in the same order.
Reverse: repeat the sequence backwards, which is much harder and has its own personal best.
Daily: the sequence comes from a seed based on the UTC date, so everyone gets the same melody that day. Label it "DAILY" and keep a separate personal best.
Free play (Classic with a random seed) is the default.
Controls
Tap or click a pad. Respond on pointerdown, not click. No double-tap zoom, no scroll, no accidental text selection. Support multi-touch gracefully (ignore extra touches during playback).
Keyboard: number keys 1 to 9 (and Q W E R and so on for a 4x4) mapped to pads in reading order, with small key hints printed on desktop only. Space triggers START or REPLAY.
Logic (logic.js, pure and tested)
Put every rule in pure functions that run in Node:

A seeded RNG (mulberry32 or similar) and a seed-from-date function.
makeSequence(seed, padCount, length) returns an array of pad indices. It must never repeat the same pad more than twice in a row, and it must be a prefix-stable sequence (the sequence for length n is the first n steps of the sequence for length n+1 for the same seed).
noteFor(padIndex, padCount) maps pads to a musical scale (a major pentatonic spread over two octaves so any order sounds pleasant). Return a frequency in Hz.
tempoFor(level) returns the step time in ms (for example from 700 ms down to 260 ms, easing).
check(sequence, inputs, mode) returns { ok, progress, done } for both Classic and Reverse modes.
scoreRound(len, mistakes) and the lives rule.
rank(level, mode) returns a title and a short line: under 5 "Goldfish", 5 to 9 "Okay Ears", 10 to 14 "Sharp Ears", 15 to 24 "Elephant", 25 and up "Savant". In Reverse mode scale the thresholds down by 30 percent. Tune with the tests so a decent first Classic run lands around Okay Ears.
node test/logic.test.js must verify: determinism by seed, prefix stability, the no-three-in-a-row rule over thousands of sequences, correct checking in Classic and Reverse including partial input, the scale mapping (every pad gets a unique pitch within range), the tempo curve, scoring, and rank boundaries. Print a clear pass or fail summary and run it after every change.

Audio (all WebAudio, no files; this is half the game)
Each pad has its own warm, mellow tone: a soft marimba or kalimba-like voice made from a sine plus a quieter triangle one octave up with a fast pluck envelope and a short natural decay. Slightly detune and add a touch of reverb (a small generated convolver or a simple feedback delay) so it sounds like a real instrument and not a beep.
Playback notes and the player's taps play the same notes, so the player always hears a melody.
Wrong pad: a low, soft rubber thud with a dull buzz. Round cleared: a quick ascending flourish. New personal best: a short cheerful jingle. Game over: a gentle descending toy-piano figure.
A working volume knob and a mute switch on the device, remembered. Audio starts only after the first tap and must work on iOS Safari. Vibrate briefly on pad press if supported (toggle).
Do not let notes overlap into noise at fast tempos: limit voices and fade quickly.
Accessibility and fairness
Never rely on color alone: each pad also has a small printed shape or symbol on it, a unique pitch, and an optional number overlay toggle.
Respect prefers-reduced-motion by removing the device bump and shortening the pad animation.
The pad light must be unmistakable at a glance, including in bright sunlight.
Share, challenge and replay
Result card (share.js): a canvas-rendered image (1080x1350 and 1200x630) in the cassette-label and sticker style described above: the level reached, the rank, the mode, the score, a tiny drawing of the pad grid with the last sequence marked in order, and the URL. Buttons on the end panel: Save image, Copy result text, Play again.
Copy text format (short, made for X): Echo (Reverse): reached level 14, Sharp Ears. Can you remember more? <challenge link>
Challenge link: ?seed=<n>&mode=<classic|reverse>&size=<3|4>&beat=<level> loads the same melody and shows a banner ("Beat level 14"), and at the end says whether the player beat it.
Replay speed: from game over to a new run in one tap. No reload, no menu detour.
Quality, mobile and performance
Works from 360px width up with no horizontal scroll, in portrait and landscape. The pads are as large as the screen allows, with touch targets at least 64px.
Smooth 60 fps. Use CSS transforms for pad presses. Scheduling audio uses the AudioContext clock so timing is tight and does not drift with frame rate.
No console errors. Pause playback when the tab is hidden and resume safely.
Everything stored in localStorage is wrapped in try and catch, and the game works without it.
Open Graph and Twitter tags in the head with a good title and description, and a small inline SVG favicon in the same style (a little pad grid).
Finish line: deliver all of this
The complete working game in the project folder, all tests passing, checked at 360px, 768px and desktop widths with no console errors, with screenshots of the title state, mid-playback, the player's turn, and game over.
A _deploy folder with only the files the live site needs, and the exact command to deploy it to Vercel (npx vercel --prod from inside _deploy, creating a new project named echo-pad). Do not try to log in or deploy yourself.
A Prompted post pack, ready to paste: a punchy title under 70 characters, a short caption (what it is, one surprising detail about making it, how to play), the tools list, a "prompt behind it" version of this brief cut to under about 1,500 characters plus 3 realistic follow-up prompts, and a 15 to 20 second screen-recording shot list.
A short honest report: what you tested and the results, and what you could not verify (for example real-phone feel, multi-touch, and how the notes actually sound).
Working rules
Do not add features outside this brief without asking. If time is tight, cut breadth, never quality.
Do not claim anything works until you have run it. If you cannot see or hear something, say so.
Keep it fun above all, and keep the toy look consistent everywhere, including every message, button and popup. If anything looks like a generic web app instead of a physical toy, fix it.

Explore more on Prompted

Loading