# Flooded cyberpunk district as a diorama

> A rainy, flooded cyberpunk lower city under a giant elevated railway, with shacks stacked on pillars, koi holograms, and police cars overhead, seen through seven CCTV cameras, a drone, or by following a resident. Opus 5.5 built it all in code.

- Kind: Game
- Live game: https://claude.ai/artifact/Y4jDA8W423ZFWPJmi5ThKa
- Page: https://meetreference.com/v/flooded-cyberpunk-district-as-diorama/
- Ready-to-use agent handoff: https://meetreference.com/v/flooded-cyberpunk-district-as-diorama/agent.txt
- Exact prompt as plain text: https://meetreference.com/v/flooded-cyberpunk-district-as-diorama/prompt.txt
- Authorship: Not stated
- Made with: Claude.ai
- Model: Claude Opus 5.5
- Built with: Three.js
- Style: 3D worlds; cyberpunk, diorama, three.js, rain, neon, city, procedural
- Shared by @akakuma0219 in X, Sep 26, 2026: https://x.com/akakuma0219/status/2103820733159981151
- Prompt fidelity: Paraphrased. The creator described the prompt in their own words rather than publishing it.

## Before you start

Guidance from Reference, separate from the creator's instructions.

1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present.
2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized.
3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed.
4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting.
5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use.

## Recreating this game

These are the creator's published instructions, unedited.

To adapt it: Change the 題材 line ("雨の夜の、水没したサイバーパンクの下層街", a flooded cyberpunk lower city on a rainy night) to your own place; the creator suggests 夕暮れの港町 (a harbor town at dusk), 昭和の屋台街, 雪の温泉街, or 空に浮かぶ島の村. Keep the lines about making everything in code and filling every wall.

## Prompt

```text
Three.jsで、斜め上から見下ろす「箱庭」の3Dを作ってください。
題材：雨の夜の、水没したサイバーパンクの下層街
・画像や3Dモデルは使わず、建物も看板も人も全部コードで作る
・建物はぎっしり。窓・室外機・配管・ネオン看板で壁を埋めて、何もない面を残さない
・霧の中で灯りがにじむように。ピントの外の光は丸くボケるように
・人が歩く、車が走る、湯気が上がる、雨が降る。画面のどこかで常に何かが動いている
・全景・路地・屋上など、視点を5〜7か所切り替えられるボタン
・ブラウザで開くだけで動くページにする
・できたら各視点のスクショを撮って、自分で見て直してから見せて
```

## What it looks like

Written by Reference from the video frames, not by the creator.

A neon cyberpunk lower city on a rainy night, seen through CCTV-style feeds: crowded shacks and signs, a canal, a stall marked OPEN, a drone's view, homes stacked on a pillar, a heat camera, and a grey dawn.

- Color: Blue-black night lit by pink, cyan, amber, and green neon and strings of warm bulbs; a magenta-purple heat-camera pass; flat grey-white fog at dawn.
- Type: Thin Japanese titles in white for each view (柱の輪, 水路, 追跡, 飛行, 過密, 熱源, 夜明け) with a red LIVE tag, camera numbers and timestamps in the corners, and the title 第七区 下層 in large spaced type on the opening and closing cards.
- Framing: 16:9 inside CCTV corner brackets with a REC dot. Mostly high, tilted views into dense streets with shallow-focus bokeh; the drone and pillar shots are steep and close.
- Structure: Title card over the neon city, a machine on a pillar, the canal, following a resident past an OPEN stall, the drone flight, the density view of stacked homes, the heat camera, dawn in fog, and the closing title card.

Storyboard, nine frames spread across the video: https://meetreference.com/media/flooded-cyberpunk-district-as-diorama/storyboard.webp

- Frame 1 at 2.9s: https://meetreference.com/media/flooded-cyberpunk-district-as-diorama/f1.webp
- Frame 2 at 8.7s: https://meetreference.com/media/flooded-cyberpunk-district-as-diorama/f2.webp
- Frame 3 at 14.5s: https://meetreference.com/media/flooded-cyberpunk-district-as-diorama/f3.webp
- Frame 4 at 20.3s: https://meetreference.com/media/flooded-cyberpunk-district-as-diorama/f4.webp
- Frame 5 at 26.1s: https://meetreference.com/media/flooded-cyberpunk-district-as-diorama/f5.webp
- Frame 6 at 31.9s: https://meetreference.com/media/flooded-cyberpunk-district-as-diorama/f6.webp
- Frame 7 at 37.7s: https://meetreference.com/media/flooded-cyberpunk-district-as-diorama/f7.webp
- Frame 8 at 43.5s: https://meetreference.com/media/flooded-cyberpunk-district-as-diorama/f8.webp
- Frame 9 at 49.3s: https://meetreference.com/media/flooded-cyberpunk-district-as-diorama/f9.webp

## How it was made, per the creator

- One-shot: no
- Notes: The reply is a how-to written after the build, not the exact transcript: paste this starting prompt with only the 題材 (subject) line changed; open it and ask for one or two concrete fixes at a time ("全体が暗い", "もっとごちゃごちゃに"); add ways to play, such as weather buttons, a camera that follows one resident, drone and train views, and a fullscreen button; then ask "公開して" to publish it. The creator's tip: "1回で完成を狙わない。「見る→言う→直す」を何回か回すのがいちばんの近道" (don't aim to finish in one go; look, say, fix, a few times over). The live version also has haze, blackout, and dawn weather, a heat camera, and a density setting from 1 to 5.

> 建物も、看板の文字も、住人も、車も、雨も光も、すべてコードで生成。
> (@akakuma0219)

## Links

- Play game: https://claude.ai/artifact/Y4jDA8W423ZFWPJmi5ThKa
- Watch: https://x.com/akakuma0219/status/2103820733159981151
- Original post: https://x.com/akakuma0219/status/2103820733159981151