Prompt
QUICKDRAW A comic book script, and a build order
ISSUE #1: "THE LONGEST THREE SECONDS" Written for the artist-engineer who will make it real.
Read the whole script. Then draw it, wire it up and ship it, all in one go. No checking in at the end of every page. Test it yourself, fix what's off, and hand it back finished with an honest note on what you tried and what you couldn't.
COVER NOTE
QUICKDRAW is a reaction-time game dressed as a pop-art comic book. A panel goes red and says WAIT. Then, at a random moment, it explodes into GO, and you tap as fast as you can. Your time in milliseconds is the hero of the page.
It must be understood in one second, played in one thumb, and it must make people say "wait, what's my time?" and try again.
THE LOOK, FOR ALL PAGES (the art direction)
This is pop art comic book: bold black outlines (4 to 6 px), flat primary colors, halftone Ben-Day dots, jagged speech and sound-effect bubbles, thick panel gutters, and a slightly tilted panel layout.
Palette: comic red #E8212A, canary yellow #FFD91A, cobalt blue #1F4FD8, a paper white #FFF8E7 and ink black #111111. A mint #2ED38A appears only for GO. Everything is flat with an optional offset black drop shadow. No gradients, no glass, no glow, no textures that look photographic.
Halftone: large areas of color carry a visible dot pattern, drawn in code, in a darker shade of the same color. The dots grow toward the edge of a panel like a printed comic.
Lettering: headlines and sound effects in a heavy comic display face ("Bangers" or "Luckiest Guy", with an Impact or sans fallback), tilted and outlined. Captions in a hand-lettered comic text face ("Comic Neue" or "Patrick Hand", with a fallback), set in all caps inside yellow narration boxes.
Layout: the game screen is one big comic panel with a thick black border, slightly rotated 1 degree, over a page of smaller decorative panels. On a phone the active panel fills the screen. Every screen change is a page turn or a panel cut: a hard, fast wipe along a diagonal, never a fade.
No faces to license, no characters to copy. Draw your own: a close-up pair of eyes (white ovals, black pupils, heavy brows) that reacts to the game state, and a simple silhouette hero with a hat for the title page.
PAGE ONE: THE TITLE
PANEL 1 (full width, tilted). A comic cover. The title "QUICKDRAW" in huge yellow outlined letters with a black offset shadow, bursting out of a red starburst. Halftone sky of blue dots. Caption box in yellow: "HOW FAST ARE YOU, REALLY?"
PANEL 2 (inset). A pair of squinting eyes watches the mouse or follows the touch point. They blink every few seconds.
PANEL 3 (the buttons). Chunky comic buttons with black outlines and a hard shadow that presses flat when tapped:
START (the classic five-tap test).
DUEL (two players on one screen).
DAILY (everyone gets the same five waits today).
A small mute button and a "best time" tag that reads like a price sticker ("BEST: 214 MS").
TECH NOTE: On the first ever visit (remembered in localStorage), show one speech bubble: "TAP WHEN IT TURNS GREEN. NOT BEFORE!"
PAGE TWO: THE TEST (this is the whole game)
PANEL 1. WAIT. The panel is solid comic red with a halftone pattern. Big black letters: "WAIT...". The eyes stare straight ahead, narrowed. A tension sound rises. There is nothing else to look at.
PANEL 2. GO. After a random delay, the panel snaps to mint green with a starburst. Huge letters: "GO!". The eyes go wide. A big "BAM!" sound effect appears. The timer starts counting from the moment the green is on screen.
PANEL 3. THE RESULT. The player taps. The panel cuts to canary yellow and shows the time as giant numerals ("231 MS") inside a jagged bubble, with a tag above it ("FASTER THAN 63 PERCENT") and a comic verdict below ("NOT BAD, PARTNER!"). Tap to go again.
PANEL 4 (TOO SOON). If the player taps while the panel is still red, the page flips to blue with a cracked "TOO SOON!" sound effect and the eyes wince. No time is recorded and the attempt is repeated.
RULES (the small print in the gutter):
A run is 5 attempts. After the fifth, show the average, the best and the median. The average decides the rank.
The wait is random between 1.5 and 5 seconds, from a seeded generator so Daily can be fair. Never the same wait twice in a row.
Fake-outs: from attempt 3 on, there is a 30 percent chance of a decoy. Instead of going green, the panel flickers to yellow with "ALMOST!" for 0.4 seconds, then goes back to red. Tapping on the decoy counts as TOO SOON. Real GO always follows, at least 0.8 seconds after a decoy.
Anticipation guard: a tap under 80 ms after GO is treated as a guess, not a reaction, and counts as TOO SOON. This is the only way to stop people just tapping constantly.
Controls: tap or click anywhere on the panel, or press Space or Enter. Respond on pointerdown so the time is measured at the instant of contact. No double-tap zoom, no scroll, no text selection. Ignore the ghost click that follows a touch.
Ranks by average time: over 450 ms "SLOTH", 351 to 450 "SNAIL", 281 to 350 "COUCH HERO", 231 to 280 "QUICK DRAW", 191 to 230 "GUNSLINGER", 190 and under "SPEED OF LIGHT". Tune the thresholds so a typical first run lands around "COUCH HERO".
TECH NOTE (timing, this is where honesty matters):
Start the clock from the first animation frame in which the green is actually painted, taken with requestAnimationFrame right after the color change, and read the tap time from the high-resolution event.timeStamp of the pointer event.
A browser and a screen add their own delay, so show a small footnote on the result: "Measured in your browser. Screens and phones add a little delay."
Do not pretend to know a player's true reaction time. The percentile is an estimate from a smooth statistical curve (a log-normal curve with a median near 270 ms and a spread of about 0.25), not a real leaderboard, and the label must say "estimated".
PAGE THREE: THE DUEL
PANEL 1. The screen is split in half, one half rotated 180 degrees so two people can sit opposite each other on a phone or tablet. Left half is red, right half is red. Each half has a big "TAP HERE" zone for each player.
PANEL 2. Both halves go mint green at the same moment with "GO!". The first to tap wins the point. A tap before green gives the point to the other player. Best of 5.
PANEL 3. A winner splash: a comic starburst on the winner's half ("PLAYER 1 WINS!") and a "TOO SLOW" on the other. Show both times side by side.
TECH NOTE: Support true two-thumb play with multi-touch (track pointers by id). Fix the fairness rules in pure code: simultaneous taps within 1 ms count as a tie for the point and replay it.
PAGE FOUR: THE DAILY
PANEL 1. A "TODAY'S CASE" panel. The five waits, the decoys and their positions come from a seed based on the UTC date, so everyone faces the same test. One official attempt per day; extra attempts are for fun and don't overwrite the record. Show a small "DAY 31" tag, counted from 1 October 2026.
PANEL 2. The result is a comic wanted poster style stat: average, best, and the same estimated percentile.
PAGE FIVE: THE SOUND (all of it made in code)
WAIT: a low, creeping bass drone that rises slowly in pitch and volume. A subtle heartbeat thump joins it after two seconds.
GO: a punchy brass-style stab (a few detuned sawtooth waves through a filter) and a crisp noise "BAM".
TOO SOON: a record-scratch (noise through a sweeping filter) and a sad trombone slide.
ALMOST (decoy): a quick slide-whistle blip.
Result: a quick drum fill and a cymbal on a personal best, with a cartoon cheer from layered formant-like blips.
A mute button, remembered. Audio starts only after the first tap and must work on iOS Safari. A short vibration on tap if the device supports it, with a toggle.
PAGE SIX: THE BUILD ORDER (tech notes)
Plain static files. No libraries, no build step, no backend, no accounts. It must run from a double-clicked index.html and on any static host. No image or audio files: all art and sound is code. Fonts may come from Google with proper fallbacks.
Files:
index.html: page, styles, panel screens.
timing.js: pure functions, no DOM, loadable in Node. The seeded generator, the date seed and the day counter, the wait schedule and decoy schedule, the anticipation guard, the run statistics (average, best, median), the rank, the log-normal percentile estimate, and the duel rules.
ink.js: comic drawing helpers: outlines, halftone dots, starbursts, jagged bubbles, the eyes.
sfx.js: the audio.
cover.js: the share image.
test/timing.test.js: Node tests.
Draw with canvas or SVG. Keep input handling free of any heavy work, so nothing delays the measured time. Do the drawing in requestAnimationFrame and keep the event handler tiny.
TESTS THAT MUST PASS (print a clear pass or fail summary and run after every change):
The same date gives the same five waits and decoys. A different date gives different ones.
Every wait is within 1.5 to 5 seconds, no two in a row are equal, and decoys never appear before attempt 3 and never within 0.8 seconds of the real GO.
The anticipation guard rejects taps under 80 ms and accepts 80 ms exactly.
Average, best and median are right for runs with 5 valid times and for runs where some attempts were too soon.
The percentile estimate is monotonic (faster is a higher percentile), stays between 0 and 100, and gives about 50 for a time near the median.
Rank boundaries are right at every edge.
Duel rules: early tap loses the point, simultaneous taps replay, best of 5 ends at 3 wins.
Day numbering is right across month boundaries.
PAGE SEVEN: THE COVER (sharing)
PANEL 1. The share image is drawn on a canvas as a comic book cover: a masthead "QUICKDRAW" in huge yellow outlined letters, an issue number taken from today's day number, a price in the corner ("12 CENTS"), a heroic halftone illustration (the wide eyes and a starburst), a big yellow burst reading the result ("231 MS!"), the rank as a banner, and the score line "Estimated faster than 63 percent". Output 1080 by 1350 and 1200 by 630. Buttons: Save image, Copy result text, Try again.
PANEL 2. Copy text: Quickdraw: 231 ms average, Quick Draw. Think you can beat that? <link>
PANEL 3. Challenge link: ?beat=<ms> shows a "BEAT 231 MS" bubble on the title page, and at the end says whether the player beat it. Daily needs no link.
LAST PAGE: THE FINE PRINT
Works from 360 px wide and up, portrait and landscape, with no horizontal scroll. The tap area is the entire panel. No console errors. Pause the attempt and cancel it if the tab is hidden mid-wait.
Respect prefers-reduced-motion: replace the diagonal wipes with a simple cut and remove the shake. Do not use flashing that could be harmful: no rapid red and green strobing, and the decoy flicker is a single change, not a repeat.
Keep the text color contrast high on every panel (black on yellow, white on red and blue, black on mint).
Store personal bests and settings in localStorage inside try and catch, and work without it.
Page title, Open Graph and Twitter tags, and a small inline SVG favicon of a pair of comic eyes.
Every word in the game is short, loud and funny in comic-book voice. Never use em dashes or en dashes anywhere, including in code comments.
THE DELIVERY (what to hand back)
The finished game in its folder, all tests passing, checked at 360, 768 and desktop widths with no console errors.
A _deploy folder with only what the live site needs, and the exact command to deploy it to Vercel from inside that folder as a new project named quickdraw-test. Don't log in or deploy it yourself.
A short write-up for sharing: a punchy title under 70 characters, a caption of a few lines, the tools list, this script condensed to under about 1,500 characters, and three believable follow-up prompts.
An honest report: what you tested and the results, and what you couldn't verify (real-phone touch latency, how the sounds feel, two-thumb play in Duel, and how the comic look reads on a real screen).
No extras nobody asked for. If time runs short, cut breadth and never polish. Don't say it works until you've run it. And if the screen ever looks like a plain colored rectangle instead of a printed comic panel, fix that before anything else.
THE END (OR IS IT?)
