--- name: rain-night-store description: Build an interactive rainy-night street-corner store in 3D with wet reflections, rain, puddle ripples, a warm interior, door, lights and sound, verified headlessly, as one HTML file. version: 0.1.1 --- # Rain night store ## Example Open `results/moonbean-corner/index.html` in a desktop browser. A street corner floats in a dark void under a purple night sky: Moonbean 24, a small flat-roofed convenience store, glows through its glass front. Inside are shelves of colourful goods, a wall of lit fridges and a counter; outside are vending machines, parked bikes, guard rails, a utility pole with sagging wires, a tall street lamp, a crosswalk and a dim city of window lights below. Thin rain streaks catch the light, puddles ripple and the wet asphalt reflects the shop front. Drag to orbit (it drifts on its own when left alone). Press R or the Rain button for heavy rain, click the door (or press D) to slide it open with a two-note chime, press L or Lights to switch the store off and back on with a fluorescent flicker, and click a puddle to splash it. All sound (rain, drops, traffic hum, the tubes, the chime) is synthesized after your first click; the button at the top right mutes it. - The file is one self-contained HTML page with no network access and no storage, built from `assets/moonbean-corner/`. - `results/moonbean-corner/report.en.html` and `report.zh-CN.html` hold its headless verification record (console errors, CSP violations, interaction proofs, colour checks, audio state, frame rate). ## When to use - Someone wants a moody, playable diorama of one small place at night: a lit shop, a kiosk, a bar or a station corner in the rain, with light, weather and sound that react to the visitor. - You need one self-contained HTML file that runs inside a strict sandbox (no network, no storage). When not to use: scenes that need model or texture files, photogrammetry or ray-traced reflections, or server-side rendering. This Skill calls no model; an agent does the work locally. ## Inputs (slots) Required: `store`, `weather`. Optional, with defaults: `street`, `props`, `palette`, `interaction`, `sounds`, `extraPrompt`. Every value is a string of at most 2000 characters. `references/prompt-slots.md` explains each slot; `assets/prompts/examples/moonbean-corner.json` is the slots file of the example. ## Workflow ``` node /scripts/fill-prompt.mjs --slots slots.json --lang en --out prompt.md node /scripts/new-project.mjs --out my-store cd my-store && npm ci npm run dev # live preview; stop it with Ctrl+C npm run build:single # → dist-single/index.html npm run shoot -- --file dist-single/index.html # needs local Chrome ``` 1. Fill the slots and render the meta prompt (`fill-prompt`). Give the prompt and any reference image to the coding agent. 2. Start from the reference app (`new-project`). It already has the block and the store shell, the canvas-drawn sign, the interior with instanced products, the street furniture, the wet ground with its planar mirror and ripple shader, the rain, the night sky and city, the procedural environment, synthesized sound, the `window.__scene` capture API and the single-file build. Change the brand in `src/components/textures.ts` (`signTexture`, `drawGlyph`), the layout in `src/config.ts` and the props in `src/components/Props.tsx` and `Street.tsx`. 3. Between `dev` and `build:single`, iterate: read `references/lessons.md` before changing the lights or the ground, and run `shoot` after each round to compare its beat screenshots with the reference. 4. Deliver `dist-single/index.html` once `shoot` passes. `references/verification.md` describes every check; `references/hosting.md` the sandbox it must pass. ## Language `fill-prompt --lang en|zh-CN` picks the prompt language (`zh` is accepted; anything else falls back to English). The scene UI follows `?lang=en|zh-CN` (default English); the shop sign is part of the scene and stays the same in both languages. The CLIs print English by default; `new-project` and `fill-prompt` take `--lang`, and the app scripts (`notices`, `inline-build`, `shoot`, `record`) take `--lang` or the `SCENE_LANG` environment variable. ## Keys None. Nothing in this Skill calls a model or a network service. `npm ci` downloads the pinned packages from the public npm registry. ## Failure boundaries - Real-time WebGL: reflections come from one planar mirror of the ground (high tier) or from additive light streaks (low tier), not from ray tracing; vertical glass does not reflect the street exactly. - Rain, ripples and splashes are shader effects; drops do not collide with the props or run down the glass. - Phones run the low tier (streak reflections, fewer drops and products, no shadows) and are verified under headless touch emulation only, not on devices. - `shoot` and `record` need Node 22.4 or newer and a local Chrome; `record` also needs ffmpeg. Headless capture has no audio, so listening is a manual check. ## FAQ - **Does it need an API key?** No. - **Why one HTML file?** It can be opened from disk, hosted anywhere and embedded in a sandboxed iframe without a server. - **How do I change the shop's name or logo?** Edit `signTexture`, `box24Texture`, `pylonTexture` and `drawGlyph` in `src/components/textures.ts`; they draw on canvases, so any text or shape works without image files. - **Why is the interior so bright?** The warm room is the subject: emissive walls, ceiling tubes above the bloom threshold and warm point lights make it read against the cool purple street. `references/lessons.md` explains the balance. - **Why is there no drei `Environment` or `MeshReflectorMaterial`?** `Environment` ships a CDN preset table that the sandbox blocks; the reflector multiplies its reflection into the albedo, which goes dark at night. `src/components/ProceduralEnv.tsx` and `src/components/Ground.tsx` build both in code. - **Where are the third-party licences?** `npm run build:single` embeds `THIRD_PARTY_NOTICES.txt` as an HTML comment in the file's ``; never strip it.