Recorded on desktop
This one is built to be scrolled with a mouse on a wide screen. Here is what it does.
Open the live demo anywayContinue
An arcade bar with five machines of its own: point at one and it plays, and one of them you can play in the page
Specification
| Engine | Finished page, plain HTML, CSS and JavaScript |
| Renders | layers-2d |
| Build step | None: open it or serve the folder |
Measured
| LCP | 0.2s |
| GLB | 0.0 MB |
| JS | 16 KB |
In the zip
- .claude/skills/kit-adapt/SKILL.md
- .cursor/rules/motion.mdc
- AGENTS.md
- CLAUDE.md
- LICENSE.txt
- START-HERE.md
- assets/poster.webp
- prompts/chatgpt-sites.md
- prompts/claude-code.md
- prompts/cursor.md
- prompts/lovable.md
- prompts/replit.md
- reference/camera-path.json
- reference/depth.webp
- reference/interaction-map.md
- reference/layout.png
- reference/scene-brief.json
- reference/tokens.json
- site/assets/app.js
- site/assets/films.js
- site/assets/instrument-sans-latin-wght-normal.woff2
- site/assets/pixel.js
- site/assets/pixelify-sans-latin-wght-normal.woff2
- site/assets/poster.webp
- site/assets/silkscreen-latin-400-normal.woff2
- site/assets/style.css
- site/favicon.svg
- site/index.html
- site/package-lock.json
- site/package.json
- site/prebuilt
- site/spec.json
- site/src/main.ts
- spec.json
Works with
| Tool | Tested with |
|---|---|
| ChatGPT Sites | Set in config |
| Claude Code | Set in config |
| Cursor | Set in config |
| Lovable | Default agent |
| Replit | Default agent |
Licence
One end product per kit on Free, Single and Builder. Agency licence on Studio and Lifetime. No redistribution of prompts or assets. Full terms.
Start here
The readme that ships in the zip.
The short way
Drag this folder into Claude Code, Codex, Cursor or whichever coding agent you use, and say:
Build this site
That is it. The agent reads AGENTS.md and CLAUDE.md in this folder on its own, finds the reference build in
site/, and gets on with it. Drag the folder rather than the zip: most agents will not look inside a zip.
To make it yours, say what you want in the same breath: "Build this site, call it Halden Joinery, and make the accent colour a deep green." It will change the copy and the tokens for you.
If you would rather do it by hand
Run the reference build as it is: cd site && npm install && npm run dev, then open the local URL.
Or take one piece into a site you already have: ask your agent to "use the hero from this kit inside my existing
site" and point it at site/src/webgl/.
Tool specific prompts, if you want more control
These are longer and more prescriptive than "build this site". Use them when you want the agent held to a particular order of work.
| Tool | File | Where to paste | Recommended model |
|---|---|---|---|
| ChatGPT | prompts/chatgpt-sites.md | Codex or ChatGPT Work, not the plain chat window | Set in config |
| Claude Code | prompts/claude-code.md | Terminal in this folder | Set in config |
| Cursor | prompts/cursor.md | Agent panel, this folder open | Set in config |
| Lovable | prompts/lovable.md | Knowledge file first, then chat | Default agent |
| Replit | prompts/replit.md | Agent, after uploading the folder | Default agent |
Customising: open Claude Code in this folder and say "use kit-adapt to change the paint colour to #hex and the headline to ...". The skill in .claude/skills/kit-adapt edits tokens.json and spec.json and re-renders.
Copy: written for a fictional business as a demonstration. Replace every name, headline and figure with your own before launch. Licence: see LICENSE.txt. One end product per licence. Do not redistribute the prompts or assets.
The prompt
The opening of the prompt. The full text, with the assets it refers to, comes with the download.
# ChatGPT (Codex or ChatGPT Work with Sites) Paste this into Codex or ChatGPT Work, not the plain chat window. Sites needs the agent runtime. Open or upload this kit folder first so the agent can read spec.json, reference/ and assets/. Sites is available on Plus, Pro, Business and Enterprise plans (UK and EEA included since July 2026), not on Free or Go. Recommended model: Set in config. @Sites Build and publish a website from the files in this folder. Publish visibility: anyone with the link. Keep assets/ in the project and reference them relatively. Then follow the PROJECT brief below exactly. PROJECT Build a single-page games website for "Continue" (Continue) from the files in this folder. The structure is in spec.json; do not invent one. This brief is written for a coding agent: every value below is exact, and the DO NOT ADD list is not negotiable. READ FIRST - spec.json (engine, sections, camera, interactions, budgets) - reference/tokens.json (all colours, fonts, spacing and motion; never hardcode a value that exists here) - reference/layout.png (subject bounding box and text safe area) - reference/interaction-map.md (pointer and scroll behaviours with phone and reduced-motion substitutes) - reference/camera-path.json and reference/scene-brief.json (scroll camera keyframes and how the scene was staged) - site/ (a working reference implementation; adapt it rather than rewriting it) 1. DEPENDENCIES AND SETUP