Prompt
# INNER WEATHER
*A personality quiz that prints you a poster.*
This brief follows one person through the game, minute by minute, and then takes you backstage to show how each moment is built. Read all of it, then make the whole thing in a single pass. No stopping to check in. 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.
---
## THE ONE-LINE VERSION
Ten questions, eight possible weathers. At the end you get a risograph-printed poster of **your inner weather**, a short, flattering and slightly funny description of you, and a way to compare yourself with a friend.
---
# PART ONE: THE PLAYER'S JOURNEY
### 0:00 Maya opens the link on her phone
She sees a poster, not an app. A rough off-white sheet of paper lies on a slightly darker desk, printed in two overlapping inks, a hot fluorescent pink and a deep blue, slightly out of register like a real print run: edges of color that don't quite line up, tiny speckles of missing ink, a visible paper grain.
The title **INNER WEATHER** is set big and chunky, the pink layer a few pixels off the blue layer so the letters seem to vibrate. Under it: "What kind of weather are you on the inside?" A single big button: **START**. A tiny line below: "10 questions. About 90 seconds."
*Spec:* the whole page is a **risograph print**. See Part Three for exactly how it looks. Nothing glows, nothing is glossy, no gradients that look digital, no dark mode.
### 0:05 The first question arrives like a sheet sliding into a printer
A paper card slides up from the bottom with a soft thunk and a small misregistration shake as it lands. The question is printed in big blue type: "It's Saturday morning and there are no plans. You..." Four answers are printed below as chunky pink-outlined pill buttons, each with a tiny hand-drawn icon.
She taps an answer. The pill fills with solid pink with a rubber-stamp "thock" sound, a small ink blot sits beside the progress dots at the top, and the card slides out as the next one slides in. There is no "Next" button. Tapping an answer is the whole interaction.
*Spec:*
- 10 questions, 4 answers each. One question at a time. Tapping an answer advances after 350 ms.
- A progress row of 10 small ink dots at the top (blue for answered, empty circles for the rest).
- A **Back** arrow lets her change the previous answer. Going back restores her earlier choice.
- Answer order is shuffled once per question with a seeded shuffle, so a retake feels different but the same session is stable.
- Large touch targets (at least 56 px high). Respond on `pointerdown` for the stamp, then advance. No double-tap zoom, no scroll jumps, no text selection.
### 0:40 The questions are fun, not generic
Maya laughs at question 4 ("Your phone is at 3 percent. Where's the charger?") and question 7 ("Someone says 'we should do this again sometime.' In your head you..."). Every question is **a small scene**, not a survey line, and every answer is a **specific, vivid, slightly funny action**, never "Strongly agree".
*Spec:* write all 10 questions and 40 answers yourself (see Part Two for the content rules). Cover different parts of life so the quiz feels varied: weekends, friends, work or school, conflict, travel, food, money, mornings, late nights, and a surprise.
### 1:30 The reveal, as the printer runs
After the last answer, the screen shows a printer rhythm: the paper sheet slides in, and the poster prints in **three passes** that she can watch (blue layer first, then pink layer a beat later, then a yellow accent), each pass wiping across the sheet with a "chunk-chunk" sound. It takes about 2.5 seconds and she can tap to skip it.
Her poster reads **THUNDERHEAD**.
*Spec:* the reveal must feel like watching a real riso print come out. A skip is allowed after 1 second. See Part Three.
### 1:40 She reads who she is
Under the poster:
- The weather name (big), with a three-word tagline ("Loud. Loyal. Electric.").
- A two-sentence description that sounds like it knows her.
- **Superpower:** one line. **Watch out for:** one line. **Best forecast with:** her best match weather. **Storm warning:** the weather she clashes with.
- A **match strength** bar showing how strongly she landed on this result (a real number from her answers, not a fake statistic).
- A secondary line: "A little bit of **Fog** underneath." (her second-highest result).
*Spec:* every result card is written warmly and specifically, flattering without being generic. No result may read as an insult or a diagnosis. No pseudo-medical claims.
### 1:55 She shares it
Three buttons: **Save poster**, **Copy link**, **Compare with a friend**. A friend opens her link and sees a banner: "A friend got Thunderhead. What are you?" After the friend takes the quiz, the result page shows how the two weathers get along ("Thunderhead + Sunbreak: A good storm and a good rainbow.") with a compatibility line and a small shared mini-poster.
*Spec:* see Part Four.
---
# PART TWO: BACKSTAGE, THE CONTENT AND LOGIC
### The eight weathers (results)
| Weather | Core energy |
|---|---|
| **Sunbreak** | warm, optimistic, easy to be around |
| **Thunderhead** | intense, loud, loyal, big feelings |
| **Fog** | quiet, mysterious, dreamy, observant |
| **Gentle Rain** | calm, caring, a good listener |
| **Heatwave** | driven, restless, competitive, passionate |
| **Snowfall** | peaceful, tidy, thoughtful, a little shy |
| **Rainbow** | creative, playful, a spark of surprise |
| **Windstorm** | adventurous, spontaneous, hard to pin down |
For each, write: a tagline of three words, a two-sentence description, a superpower, a watch-out, a best-match weather and a clash weather (these form a fixed compatibility table, see Part Four), and a 6-word "caption" used on the poster.
### The questions (content rules)
- 10 questions, 4 answers each, all written by you, all different in tone and situation.
- Every answer carries **weights** across the eight weathers: a primary weather (weight 2), and one or two secondary weathers (weight 1). Spread the weights so no single answer position or letter is a giveaway.
- Across the whole quiz, every weather must appear as a primary at least 4 times and no weather may appear as a primary more than 6 times, so all eight results are reachable and fair.
- No question may be skippable or have an obviously "correct" answer.
- Voice: short, warm, funny, a little cheeky. Never mean, never about appearance, never about weight, money status, politics or religion.
### The logic (pure, in its own file, no DOM, loadable in Node)
- A seeded random generator and a seeded shuffle.
- `score(answers)` returns an eight-number score vector from the weights.
- `result(scoreVector)` returns the winning weather, the runner-up, and the match strength (the winner's share of the total, shown as a percentage). Ties are broken by a fixed, documented order so the result is always deterministic, and the tie-break should not always favor the same weather: break ties by the earliest question where the tied weathers received weight.
- `compat(a, b)` returns a compatibility line and a label for any pair of weathers, from a hand-written table for all 36 pairs (including a weather paired with itself).
- `encode(result, runnerUp, strength)` and `decode(string)` for the share link, short and URL safe, with validation so a bad or hand-edited link fails gracefully to the start screen.
### Tests that must pass (print a clear pass or fail summary, run after every change)
- Every weather can be reached: for each of the eight, find an answer sequence that produces it (by search or a solver) and assert it.
- Fairness: with 10,000 uniformly random answer sets, each weather lands between 6 and 20 percent of the time. Print the distribution.
- Determinism: the same answers always give the same result, and tie-breaks follow the documented rule.
- Content rules: each weather is the primary on 4 to 6 answers, every question has 4 answers, no two answers in a question have identical weights, and no text contains an em dash or an en dash.
- Compatibility: all 36 pairs exist, both orders (a with b and b with a) give a sensible line, and every weather's best-match and clash entries refer to valid weathers.
- Share codes round trip and reject garbage without throwing.
---
# PART THREE: THE INK ROOM (the risograph look, in detail)
This is the entire visual identity. Make it unmistakably a riso print.
- **Paper:** an uncoated off-white (`#F4EFE4`) with fine fiber noise and tiny dark flecks, generated in code. Slight uneven tone.
- **Inks (only these, printed as flat spot colors):** fluorescent pink `#FF48B0`, riso blue `#0078BF`, sunflower yellow `#FFE800`, and a deep teal `#00A99D` for only a few accents. The paper white shows through.
- **Overprint:** where two inks overlap, they **multiply** (using `mix-blend-mode: multiply` or canvas `multiply` compositing), producing a darker mixed color, exactly like transparent inks. This is the heart of the look.
- **Misregistration:** each ink layer is offset from the others by 1 to 4 pixels in a slightly different direction. It changes on each card, and wobbles slightly while loading.
- **Grain and halftone:** large areas of ink have a visible speckled grain with a few missing spots, and gradients are made from **halftone dots or dither**, not smooth color. Draw these in code.
- **Shapes:** bold, simple, flat geometric illustration: circles, arcs, stripes, blobs, zigzags. Eight different **generative weather compositions**, one per result, each built from 3 or 4 layers in the inks above, seeded so they vary slightly each time:
- Sunbreak: a big pink sun with blue rays and a yellow glow, over wavy stripes.
- Thunderhead: a stacked blue cloud mass with a pink lightning zigzag and yellow flashes.
- Fog: layered translucent blue and pink horizontal bands with a dithered fade and a faint circle sun.
- Gentle Rain: vertical blue dashes in rows, a pink umbrella arc, and small teal ripples below.
- Heatwave: concentric pink and yellow rings that distort, with wavy heat lines.
- Snowfall: scattered blue and teal dots and tiny stars over a pink horizon.
- Rainbow: pink, yellow, teal and blue arcs overlapping, with a small cloud at each end.
- Windstorm: swooping blue and pink curved strokes and leaves, with a spiral.
- **Type:** big chunky headlines in a heavy grotesque or slab face ("Archivo Black", "Rubik Mono One" or "Bowlby One", with a safe fallback), set in blue with a pink offset copy for the riso vibration. Small text in a clean grotesque ("Space Grotesk" or "Work Sans") in blue, never pure black.
- **Layout:** poster-like and slightly asymmetric: thick rules, circled numbers, a small printer's registration mark and a color swatch strip in a corner, a tiny "PRINT RUN 01 / 100" label. Edges of the paper are very slightly rough and cast a soft shadow on a dark desk behind.
- **Motion:** printing, not animating. Layers wipe in one ink at a time. Cards slide like sheets into a feeder. Taps stamp down. Keep everything short and physical. No bounces that look digital.
- Respect `prefers-reduced-motion`: show the finished poster at once and drop the shakes and wipes.
---
# PART FOUR: SHARING AND COMPARING
- **Save poster:** the result poster is drawn on a canvas as a full riso print: the weather composition, the name in huge type, the tagline, the match strength, the runner-up line, and a small footer with the site address. Output 1080 by 1350 and 1200 by 630. For the landscape version, place the composition left and the text right.
- **Copy link:** `?r=<code>` opens the start screen with a banner "A friend got Thunderhead. What are you?". Names are never collected. The link carries only the weather codes, never any personal data.
- **Compare:** after a friend finishes with a `?r=` link present, show a pair poster with both weathers side by side, the compatibility label and line, and a "forecast" like "Chance of great conversations: 90 percent" (written, not computed from real data). Provide **Save pair poster** too.
- **Retake:** one tap. A retake picks a different shuffle of answers and does not overwrite the saved first result unless the player chooses to.
- **History:** keep the last result locally so reopening the page shows it with a "Retake" button.
---
# PART FIVE: THE SOUND OF A PRINT SHOP
All audio is synthesized. No audio files.
- **Answer tap:** a rubber-stamp "thock" (a short low sine thump with a click of noise), slightly different each time.
- **Card slide:** a quiet paper slide (filtered noise sweep).
- **Reveal:** a rhythmic "chunk-chunk" printer drum made from short low pulses and noise, one pass per ink color, ending with a soft ding.
- **Result:** a gentle, warm chord that matches the weather's character, different for each of the eight (for example Thunderhead a low rumble and a bright pluck, Gentle Rain soft high droplets, Windstorm a rising whoosh, Snowfall a delicate music-box tone).
- **Ambient:** a very quiet room tone of a print shop (low hum with occasional paper rustle). Keep it subtle.
- A mute button, remembered. Audio starts only after the first tap and must work on iOS Safari.
---
# PART SIX: HOW IT'S BUILT
- 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. Google Fonts are allowed with fallbacks.
- Files:
- `index.html`: page, styles and the screen flow.
- `quiz-data.js`: the questions, answers with weights, and the eight weather texts. **Data only, no logic**, so the writing is easy to edit.
- `forecast.js`: **all the pure logic above**, no DOM, loads in Node.
- `riso.js`: the printing engine: paper, overprint, misregistration, halftone and the eight compositions.
- `hush.js`: audio.
- `poster.js`: the share images.
- `test/forecast.test.js`: the tests above.
- Render the posters with canvas using multiply compositing, and keep the heavy generative work out of the tap handler so the stamp feels instant. Draw each ink layer into its own offscreen canvas and composite once.
### Quality checklist
- Works from 360 px wide and up, portrait and landscape, with no horizontal scroll.
- Text contrast stays high: blue on off-white is readable, and pink is used for big shapes and large type only, never for small body text.
- No console errors. Wrap all `localStorage` use in try and catch, and work without it.
- Page title, Open Graph and Twitter tags (with a fixed generic preview text), and a small inline SVG favicon of a two-ink cloud.
- Every word in the game is short, warm and a little funny. Never use em dashes or en dashes anywhere, including comments.
---
# PART SEVEN: WHAT TO HAND BACK
1. The finished game in its folder, with all tests passing, checked at 360, 768 and desktop widths and with no console errors.
2. 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 `inner-weather`. Don't log in or deploy it yourself.
3. A short write-up for sharing: a punchy title under 70 characters, a caption of a few lines, the tools list, this brief condensed to under about 1,500 characters, and three believable follow-up prompts.
4. An honest report: what you tested and the results, the weather distribution from the fairness test, and what you couldn't verify (real-phone feel, how the print sounds actually come across, and how the risograph 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 a poster ever looks like a smooth digital gradient instead of overlapping spot inks, fix that before anything else.
