2D platformer in the browser
A side-scrolling jump-and-run in the style of the classics, with art and sound you are allowed to ship.
Starter kit for an interactive 3D scene on a web page
A recipe for a product or object that visitors rotate and explore, for Claude Code, Cursor, Codex or Copilot: three.js with React Three Fiber or plain three.js, a CC0 model and lighting, exact versions, a plan with checks, and the traps two test builds ran into.
New to kits? Read how to use a kit.
How the kit fits together
Your agent reads the brief, builds with these parts and checks its own work before you ship. Click a part to see why it was picked.
Agent and its tools
Your coding agentClaude Code · Cursor · OpenAI Codex · GitHub Copilotpmndrs docsLibrary knowledgePlaywright MCP0.0.83 · Apache-2.0AgentGidTool and asset data Build steps 1–6 of the plan
Code
Three.js0.186.1 · MITReact Three Fiber9.8.1 · MITDrei10.7.9 · MITReact19.3.0 · MITVite8.3.4 · MITTypeScript7.0.2 · Apache-2.0gltfjsx6.5.3 · MITGSAPoptional, off · Standard 'no charge' licenseReact Postprocessingoptional, off · MITReact Three Rapieroptional, off · license not statedLevaoptional, off · MIT
File for your agent
AGENTS.md
The plan your agent follows, a step at a time, with a check that must pass before the next step. It also holds the stack with exact versions, the licenses and the known traps.
File for your agent
first-prompt.txt
The first message you paste into your agent. It points the agent at AGENTS.md and tells it to stop after step 1 and report.
File for your agent
.mcp.json
The MCP servers the brief lists, set up for Claude Code. The kit builder writes the same setup for Cursor, Codex or Copilot.
File for your agent
CREDITS.md
The license record of every third-party file. The brief tells the agent to add a row for every file it brings in.
You bring this
Your coding agent
The kit works with any of these. Pick yours in the kit builder and the setup files change to match.
Library knowledge
pmndrs docs
official source
three.js changes every month and models write outdated imports from memory. Run by the maintainers of React Three Fiber and Drei.
By pmndrs (maintainers of React Three Fiber and Drei) · Agent can use it through MCP
2 other candidates also fit.
Visual checks
Playwright MCP
0.0.83Apache-2.0
Lets the agent open the page, take screenshots at phone and desktop sizes, and read the console.
By Microsoft · In 1,094 of 29,413 sampled repos · v0.0.83 on npm · Agent can use it through MCP
1 other candidate also fits.
Tool and asset data
AgentGid
If the agent needs something this kit does not list, it asks AgentGid instead of guessing from memory.
By AgentGid · Agent can use it through MCP
3D library
Three.js
0.186.1MIT
Draws the scene with WebGL. AgentGid has no agent rules for it yet; the three.js project publishes its own instructions for models, linked in the brief.
In 137 of 4,663 JS/TS agent projects (2.9%) · #1 of 22 in 3d and graphics · v0.186.1 (npm registry) · MIT · Installs from a package registry
React layer
React Three Fiber
9.8.1MIT
Lets you describe the scene as components and react to state.
In 71 of 4,663 JS/TS agent projects (1.5%) · #3 of 22 in 3d and graphics · v9.8.1, September 24, 2026 · MIT · Installs from a package registry
Helpers
Drei
10.7.9MITofficial source
Controls, environment lighting, loaders and shadows without writing them yourself.
v10.7.9 · MIT · 90.2% of React Three Fiber projects in AgentGid's scan also depend on it · Installs from a package registry
UI framework
React
19.3.0MIT
React Three Fiber is a React renderer and follows React's major version.
In 1,980 of 4,663 JS/TS agent projects (42.5%) · #1 of 28 in web frameworks · v19.3.0, September 9, 2026 · MIT · Installs from a package registry
Dev server and bundler
Vite
8.3.4MIT
Serves the page while you build and writes the static files to host. The most used bundler in AgentGid's scan: 25.5% of JavaScript and TypeScript agent projects.
In 1,188 of 4,663 JS/TS agent projects (25.5%) · #1 of 89 in build tools and bundlers · v8.3.4, October 8, 2026 · MIT · Installs from a package registry
1 other candidate also fits.
Language
TypeScript
7.0.2Apache-2.0
Types catch wrong prop names and missing nodes in generated model components.
In 3,311 of 4,663 JS/TS agent projects (71%) · #1 of 23 in languages, types and runtimes · v7.0.2 (npm registry) · Apache-2.0 · Installs from a package registry
1 other candidate also fits.
Model pipeline
gltfjsx
6.5.3MITofficial source
Raw models are too heavy for the web. This step compresses them. Also writes a typed React component for the model. Its output needs four small edits for React 19, listed in the plan.
v6.5.3 · MIT · Installs from a package registry
1 other candidate also fits.
Animation
GSAP
3.15.0Standard 'no charge' licenseoptional, off
Camera moves and timed transitions. Among the React Three Fiber projects AgentGid counted, 20.3% add GSAP. Its license is GSAP's own 'no charge' license, not MIT.
In 109 of 4,663 JS/TS agent projects (2.3%) · #6 of 29 in animation and motion · v3.15.0, April 13, 2026 · Standard 'no charge' license: https://gsap.com/standard-lice · Installs from a package registry
Not a standard open-source license: read it before a commercial release.
2 other candidates also fit.
Screen effects
React Postprocessing
3.2.0MIToptional, offofficial source
Bloom, depth of field and similar finishing effects.
v3.2.0 · MIT · 11.8% of React Three Fiber projects in AgentGid's scan also depend on it · Installs from a package registry
1 other candidate also fits.
Physics
React Three Rapier
2.2.0license not statedoptional, offofficial source
Objects that fall, collide or can be thrown.
v2.2.0 · not stated in the npm registry entry · 3.6% of React Three Fiber projects in AgentGid's scan also depend on it · Installs from a package registry
Tuning panel
Leva
0.10.1MIToptional, off
Sliders for lights and materials while you tune the look.
In 7 of 4,663 JS/TS agent projects (0.2%) · #94 of 108 in dev workflow and config · v0.10.1 (npm registry) · MIT · Installs from a package registry
1 other candidate also fits.
3D model · from Poly Haven
Arm Chair 01
CC0
The object on show. Swap in your own .glb at any time. Photo-scanned, CC0, and every file has a direct link through a keyless API.
CC0 (assets); API code AGPL-3.0; API ToS · Commercial use OK · Credit when you use its API · Free · 5,626 polygons · 0.85 x 1.06 x 0.77 m · 0.8 MB · Agent can fetch it through an API
Asks for a credit in products that call its API while running.
Do not scrape its website. Use its API, one request at a time, and download only the files you use.
6 other candidates also fit, 12 ruled out.
Lighting environment · from Poly Haven
Studio Small 09
CC0
One HDR image lights the whole scene and gives metal and glass something to reflect. The 1k .hdr files are about 1.5 MB, small enough to ship.
CC0 (assets); API code AGPL-3.0; API ToS · Commercial use OK · Credit when you use its API · Free · 1.6 MB · Agent can fetch it through an API
Asks for a credit in products that call its API while running.
Do not scrape its website. Use its API, one request at a time, and download only the files you use.
1 other candidate also fits, 6 ruled out.
Floor and surface materials · from ambientCG
Wood 051
CC0optional, off
A floor or backdrop under the model.
CC0 1.0 Universal · Commercial use OK · No credit needed · Free · 6.7 MB · Agent can fetch it through an API
1 other candidate also fits, 6 ruled out.
Generate a custom model
Meshy
Meshy Terms of Serviceoptional, off
When no library model fits and you want one made from a prompt or a photo.
Meshy Terms of Service; free-plan outputs CC BY 4.0, paid-plan outputs owned by the user · Commercial use OK · Credit depends on the item · Free tier · Agent can fetch it through an API
Credit depends on the item: record each one.
1 other candidate also fits, 3 ruled out.
Font for labels · from Google Fonts
Inter
OFL-1.1optional, off
Captions and buttons around the scene.
SIL OFL 1.1 (most), Apache-2.0 (some), Ubuntu Font License 1.0 · Commercial use OK · No credit needed · Free · 856 KB · variable font · Agent can fetch it through an API
6 other candidates also fit, 1 ruled out.
Scripted browser tests
Playwright (JavaScript)
1.64.0Apache-2.0
Screenshots at two sizes, the no-WebGL check and the network check have to be repeatable. The most used browser test runner in AgentGid's scan. Its first run downloads a browser.
In 1,027 of 4,663 JS/TS agent projects (22%) · #2 of 42 in testing · v1.64.0, October 7, 2026 · Apache-2.0 · Installs from a package registry
When the agent is done
9 checks
npm run devserves the page with no console errors, andnpm run buildwrites static files that also work when they are served from a sub-folder.- The model is visible, lit by the environment map, with a soft contact shadow under it.
- Orbit and zoom work with mouse and touch, panning is off, and the camera cannot go below the floor or inside the model.
- At least one interaction visibly changes the scene: a colour switch or a hotspot.
- At 390 x 844 and at 1440 x 900 the canvas fills its container without stretching and the whole model is inside the frame.
- A loading state shows until the model is ready, and a plain message shows when WebGL is unavailable.
- Model, texture and HDR files together are under 5 MB, and the page requests nothing from another host.
- Screenshots at both sizes show the model, not a blank canvas.
CREDITS.mdhas a row for every third-party file, and the build contains a license text for every bundled package and for the decoder, with no empty section.
Where to publish
Netlify
The build is a static folder.
Free tier: 300 credits/month · Paid from $9 a month · Agent can fetch it through an API
3 other candidates also fit.
After the agent
Left to you
- Look at the model for brand names, logos or a recognisable product shape before a commercial launch.
- Deploy the build: it needs your account on the host.
Files for your agentAgent tools (MCP)CodeArt, sound and contentChecksOptional, off by default
What you get
The result
A page with a 3D model under realistic lighting that the visitor can orbit, zoom and change, sized for phones as well as desktops, built into static files you can host anywhere.
7 files
Ready for your agent
AGENTS.md: the plan, with a check after every stepfirst-prompt.txt,install.txt,.mcp.jsonCREDITS.md,CLAUDE.md,kit.json
17 parts
Every part is free or has a free tier
- Code: MIT, Apache-2.0
- Assets: CC0
- Agent tools: Apache-2.0
2 of 2 asset sources allow commercial use with no credit needed. Plus 7 optional parts, off by default.
9 / 9
Checks met in the last test build
- Build 2, Oct 12, 2026
- 28 things in the brief reported, 2 serious
- Findings went back into recipe v0.3
The brief counts it as done when these 9 checks pass
npm run devserves the page with no console errors, andnpm run buildwrites static files that also work when they are served from a sub-folder.- The model is visible, lit by the environment map, with a soft contact shadow under it.
- Orbit and zoom work with mouse and touch, panning is off, and the camera cannot go below the floor or inside the model.
- At least one interaction visibly changes the scene: a colour switch or a hotspot.
- At 390 x 844 and at 1440 x 900 the canvas fills its container without stretching and the whole model is inside the frame.
- A loading state shows until the model is ready, and a plain message shows when WebGL is unavailable.
- Model, texture and HDR files together are under 5 MB, and the page requests nothing from another host.
- Screenshots at both sizes show the model, not a blank canvas.
CREDITS.mdhas a row for every third-party file, and the build contains a license text for every bundled package and for the decoder, with no empty section.
Left to you, because no check can do it: Look at the model for brand names, logos or a recognisable product shape before a commercial launch. Deploy the build: it needs your account on the host.
The parts and why each was picked
Defaults for commercial use, free parts and Claude Code. Change them.
Code
3D library
Three.js 0.186.1
Draws the scene with WebGL. AgentGid has no agent rules for it yet; the three.js project publishes its own instructions for models, linked in the brief.
In 137 of 4,663 JS/TS agent projects (2.9%) · #1 of 22 in 3d and graphics · v0.186.1 (npm registry) · MIT · Installs from a package registry
React layer
React Three Fiber 9.8.1
Lets you describe the scene as components and react to state.
In 71 of 4,663 JS/TS agent projects (1.5%) · #3 of 22 in 3d and graphics · v9.8.1, September 24, 2026 · MIT · Installs from a package registry
Helpers
Controls, environment lighting, loaders and shadows without writing them yourself.
v10.7.9 · MIT · 90.2% of React Three Fiber projects in AgentGid's scan also depend on it · Installs from a package registry
UI framework
React 19.3.0
React Three Fiber is a React renderer and follows React's major version.
In 1,980 of 4,663 JS/TS agent projects (42.5%) · #1 of 28 in web frameworks · v19.3.0, September 9, 2026 · MIT · Installs from a package registry
Dev server and bundler
Vite 8.3.4
Serves the page while you build and writes the static files to host. The most used bundler in AgentGid's scan: 25.5% of JavaScript and TypeScript agent projects.
In 1,188 of 4,663 JS/TS agent projects (25.5%) · #1 of 89 in build tools and bundlers · v8.3.4, October 8, 2026 · MIT · Installs from a package registry
Also fits: Next.js.
Language
TypeScript 7.0.2
Types catch wrong prop names and missing nodes in generated model components.
In 3,311 of 4,663 JS/TS agent projects (71%) · #1 of 23 in languages, types and runtimes · v7.0.2 (npm registry) · Apache-2.0 · Installs from a package registry
Also fits: Plain JavaScript.
Model pipeline
Raw models are too heavy for the web. This step compresses them. Also writes a typed React component for the model. Its output needs four small edits for React 19, listed in the plan.
v6.5.3 · MIT · Installs from a package registry
Also fits: glTF Transform CLI.
Scripted browser tests
Playwright (JavaScript) 1.64.0
Screenshots at two sizes, the no-WebGL check and the network check have to be repeatable. The most used browser test runner in AgentGid's scan. Its first run downloads a browser.
In 1,027 of 4,663 JS/TS agent projects (22%) · #2 of 42 in testing · v1.64.0, October 7, 2026 · Apache-2.0 · Installs from a package registry
Animationoptional, off
GSAP 3.15.0
Camera moves and timed transitions. Among the React Three Fiber projects AgentGid counted, 20.3% add GSAP. Its license is GSAP's own 'no charge' license, not MIT.
In 109 of 4,663 JS/TS agent projects (2.3%) · #6 of 29 in animation and motion · v3.15.0, April 13, 2026 · Standard 'no charge' license: https://gsap.com/standard-lice · Installs from a package registry
Not a standard open-source license: read it before a commercial release.
Also fits: Framer Motion, Motion.
Screen effectsoptional, off
Bloom, depth of field and similar finishing effects.
v3.2.0 · MIT · 11.8% of React Three Fiber projects in AgentGid's scan also depend on it · Installs from a package registry
Also fits: Postprocessing.
Physicsoptional, off
Objects that fall, collide or can be thrown.
v2.2.0 · not stated in the npm registry entry · 3.6% of React Three Fiber projects in AgentGid's scan also depend on it · Installs from a package registry
Installed along with them: React DOM 19.3.0, Vite React plugin 6.1.2, Types for three.js 0.186.0.
Assets
3D model
The object on show. Swap in your own .glb at any time. Photo-scanned, CC0, and every file has a direct link through a keyless API.
CC0 (assets); API code AGPL-3.0; API ToS · Commercial use OK · Credit when you use its API · Free · 5,626 polygons · 0.85 x 1.06 x 0.77 m · 0.8 MB · Agent can fetch it through an API
Asks for a credit in products that call its API while running.
Do not scrape its website. Use its API, one request at a time, and download only the files you use.
Also fits: Kenney, Quaternius, Poly Pizza, Smithsonian Open Access and 2 more. Ruled out: 12, see why.
Lighting environment
One HDR image lights the whole scene and gives metal and glass something to reflect. The 1k .hdr files are about 1.5 MB, small enough to ship.
CC0 (assets); API code AGPL-3.0; API ToS · Commercial use OK · Credit when you use its API · Free · 1.6 MB · Agent can fetch it through an API
Asks for a credit in products that call its API while running.
Do not scrape its website. Use its API, one request at a time, and download only the files you use.
Floor and surface materialsoptional, off
A floor or backdrop under the model.
CC0 1.0 Universal · Commercial use OK · No credit needed · Free · 6.7 MB · Agent can fetch it through an API
Also fits: Poly Haven. Ruled out: 6, see why.
Generate a custom modeloptional, off
When no library model fits and you want one made from a prompt or a photo.
Meshy Terms of Service; free-plan outputs CC BY 4.0, paid-plan outputs owned by the user · Commercial use OK · Credit depends on the item · Free tier · Agent can fetch it through an API
Credit depends on the item: record each one.
Font for labelsoptional, off
Captions and buttons around the scene.
SIL OFL 1.1 (most), Apache-2.0 (some), Ubuntu Font License 1.0 · Commercial use OK · No credit needed · Free · 856 KB · variable font · Agent can fetch it through an API
Also fits: Fontsource, Fira Code, Hack, Bunny Fonts and 2 more. Ruled out: 1, see why.
For your agent
Library knowledge
pmndrs docs official source
three.js changes every month and models write outdated imports from memory. Run by the maintainers of React Three Fiber and Drei.
By pmndrs (maintainers of React Three Fiber and Drei) · Agent can use it through MCP
Also fits: Context7, three.js instructions for LLMs.
Visual checks
Playwright MCP 0.0.83
Lets the agent open the page, take screenshots at phone and desktop sizes, and read the console.
By Microsoft · In 1,094 of 29,413 sampled repos · v0.0.83 on npm · Agent can use it through MCP
Also fits: Chrome DevTools MCP.
Tool and asset data
If the agent needs something this kit does not list, it asks AgentGid instead of guessing from memory.
By AgentGid · Agent can use it through MCP
Ship
Where to publish
The build is a static folder.
Free tier: 300 credits/month · Paid from $9 a month · Agent can fetch it through an API
Also fits: GitHub Pages, Cloudflare Workers, Render.
Licenses of the assets
| Source | Used for | Terms | License page |
|---|---|---|---|
| Poly HavenArm Chair 01, Studio Small 09 | 3D model, Lighting environment | Commercial use OK; Credit when you use its API; Can ship inside your build | CC0 (assets); API code AGPL-3.0; API ToSread Oct 10, 2026 |
License terms as the sources state them, read on the dates shown. The kit's CREDITS.md starts with these rows and the brief tells the agent to add one for every file it brings in. This is a record, not legal advice.
The plan your agent follows
The agent works one step at a time and does not start a step until the previous one meets its "Done when" lines. The full instructions, with code, are in AGENTS.md.
- Scaffold · done when:
- The page shows a lit test cube that fills the window and that the pointer can orbit, with no console errors.
npm run buildpasses anddist/index.htmlloads its script from./assets/.- The kit files listed under "Before you start" are still there.
- Fetch assets · done when:
raw-assets/holds the model with its textures and the .hdr file, and each has a row in CREDITS.md.- Running the download script again changes nothing.
- Prepare the model · done when:
npx tsc -bpasses with the model component in place.- The compressed model and the .hdr in
public/total under 5 MB.
- Build the scene · done when:
- A screenshot shows the model with reflections from the environment, and dragging rotates the view.
- From the start view and from the highest and lowest angles the controls allow, the model's projected bounds stay inside the frame at both window sizes.
- With the view zoomed in and dragged down as far as it goes, the camera's y stays above 0.
- With WebGL disabled (a test script that makes
HTMLCanvasElement.prototype.getContextreturn null for 'webgl2'), the message is visible. - The loading text is gone on every one of six reloads.
- Interaction · done when:
- Clicking each control changes the pixels of the model in a screenshot by an amount a person would notice. Take the screenshot when the hook says the animation has finished.
- Performance and sizes · done when:
- Screenshots at both sizes show the whole model inside the frame.
- The draw-call count is logged, and two seconds after the last input nothing is drawn any more.
- Verify and ship · done when:
- Every line under Definition of done is true.
Known traps
What test builds and the official docs showed going wrong with these parts. Each one is in the brief, so the agent reads it before it gets there.
- React Three Fiber follows React's major version: v9 needs React 19. Its npm entry accepts react and react-dom >=19 <19.4, and the two must be the same version. npm registry, Oct 12, 2026
- Do not write the old pattern with a script tag pointing at three.js r128 on a CDN. Import from 'three' and 'three/addons/'. three.js instructions for LLMs
- Do not ship
<Environment preset="studio" />. Drei's docs say presets are not meant for production because they load from a CDN. Use your own copy of the .hdr. Drei docs - A Draco-compressed model has the same problem in a quieter form: Drei downloads the decoder from www.gstatic.com on every visit unless
useGLTFgets a local path. Drei source and test build - gltfjsx 6.5.3 writes React 18 TypeScript and absolute model URLs. Used unchanged, the page is blank ("does not provide an export named 'GLTF'"),
tsc -breports five errors, and the model is missing as soon as the site sits in a sub-folder. gltfjsx source and test build - The Canvas
fallbackprop does not show when WebGL is missing: the renderer error unmounts the whole React tree and the page stays blank. test build - OrbitControls pans by default. Panning moves the orbit centre, so a visitor can drag it under the floor whatever the distance and angle limits are. test build
- A perspective camera's field of view is vertical. A view tuned for a wide window cuts off the sides of the model in a tall one. test build
- Animate by changing refs inside useFrame and scale by the frame delta. Calling setState every frame or on pointer move sends each update through React and slows the scene. AgentGid: React Three Fiber
- A Poly Haven .gltf is not one file. It points to a .bin and several textures that must sit at the relative paths its files API lists. Poly Haven API
- CC0 covers copyright, not trademarks. Poly Haven flags some models of real products, and the flag is not complete: look at the model before a commercial launch. Poly Haven API, checked Oct 12, 2026
- The simple framing formula, height / (2 * tan(fov / 2)), is for a flat picture seen head-on. A model seen from a three-quarter angle needs 30 to 45% more distance, and a margin of 10 to 20% hides the problem until a leg is cut off. second test build
- Vite's license list covers bundled packages only. Files you copy through
public/(the decoder) are not in it, and a package without a license file gets an empty section while the build stays green. Vite docs and second test build - The three.js instructions for LLMs show an import map that loads three.js from a CDN. That is for single-file demos: this project installs three.js from npm and must not fetch from another host. three.js instructions for LLMs
Checks on this kit
What happened when an agent built from it
The recipe was given to a fresh coding agent in a clean sandbox, twice. The agent got only the kit files. It had to build the project and write down everything in the brief that was wrong, missing or unclear.
Build 1 · brief v0.1 · Oct 12, 2026
- 9 of 9
- lines of the definition of done met
- 36
- things in the brief reported as wrong, missing or unclear
- 7
- serious: stopped the agent or would have shipped something unshippable
The default model was a replica of a branded camera. The generated model component did not compile, and the page fetched a decoder from a Google server on every visit.
Build 2 · brief v0.2 · Oct 12, 2026
- 9 of 9
- lines of the definition of done met
- 28
- things in the brief reported as wrong, missing or unclear
- 2
- serious: would have shipped without two license texts
Nothing stopped the build. Following the brief to the letter left two license texts out of the build: one package ships no license file, and the decoder is copied past the license list. The agent added both.
Result of the last build. A product page of 11 files and 4.1 MB: 2 draw calls a frame, nothing drawn while idle, no request to another host. Its findings went back into the recipe, which is now at v0.3. That version has not been built again as a whole.
Model: Arm Chair 01 by Kirill Sannikov. Lighting: Studio Small 09 by Sergej Majboroda. Both from Poly Haven, CC0. Screenshots of the project the test agent built.
Checked again on Oct 19, 2026. AgentGid checks every recipe each week, without a model: 10 pinned packages all still exist on their registries, 4 of them have a newer release than the tested pin; 38 links in the brief: all open. npm lines are checked pin by pin, not installed.
Not checked by anyone yet
- A real phone and a real GPU: every check ran with software WebGL
- Safari and Firefox
- The deploy to Netlify
- Plain three.js without React
The kit files
Put them in an empty project folder, open your coding agent there and paste the first prompt (Claude Code first asks you to approve the MCP servers in .mcp.json). These are the files for Claude Code with the default answers; the kit builder writes them for Cursor, Codex, Copilot or another agent, and for other choices. Full guide: how to use a kit.
| File | What it is | Size |
|---|---|---|
AGENTS.md | The brief: what to build, stack and versions, licenses, plan with checks, known traps | 318 lines |
CREDITS.md | The license record of every third-party file | 37 lines |
first-prompt.txt | Your first message to the agent | 8 lines |
install.txt | Install commands with exact versions | 4 lines |
CLAUDE.md | One line that imports AGENTS.md for Claude Code | 1 lines |
.mcp.json | The MCP servers the brief lists, for Claude Code | 19 lines |
kit.json | The kit as data: parts, versions, checks | 331 lines |
first-prompt.txt the agent stops after each step and reports
Read AGENTS.md from top to bottom before you do anything else. The kit files it lists are already in this folder. Then do step 1 of the plan and stop. Report back with: 1. the commands you ran, 2. what each "Done when" check showed (a screenshot or the output), 3. anything in AGENTS.md that turned out to be wrong, missing or out of date. Do not start step 2 until I reply.
Or let it run the whole plan
Read AGENTS.md from top to bottom before you do anything else. The kit files it lists are already in this folder. Then work through the plan in order. After each step, run its "Done when" checks yourself and write one line in PROGRESS.md: the step, what you checked, and the result. You may install the packages and download the files that AGENTS.md lists without asking. Stop and ask me only for what its "Before you start" section says needs a person. When a check fails, fix the cause and run it again. If it still fails after two real fixes, stop and tell me what you tried. Keep a list in PROGRESS.md of anything in AGENTS.md that turned out to be wrong, missing or out of date. When every line of the Definition of done is true, stop and show me how to run it.
install.txt
npm install --save-exact three@0.186.1 @react-three/fiber@9.8.1 @react-three/drei@10.7.9 react@19.3.0 react-dom@19.3.0 npm install -D --save-exact vite@8.3.4 typescript@7.0.2 @playwright/test@1.64.0 @vitejs/plugin-react@6.1.2 @types/three@0.186.0 # when the plan calls for it: npx gltfjsx@6.5.3 <model>.gltf --transform --types
Other versions of this kit
How the scene is written
React suits a scene that lives inside a site; plain three.js suits a single stand-alone page.
React Three Fiber (this page) Plain three.js
Lighting
Studio (this page) Outdoor sky
Language of on-screen text
Fonts must cover the script, and voices and speech models must know the language.
English (this page) Russian
Other versions were not test-built as a whole: the kit says which parts differ from the tested one.
Ask for this kit from your agent
Agents connected to the AgentGid MCP server get the same kit without this page: list_recipes(), then plan_project({"recipe": "3d-scene", "answers": {"agent": "cursor"}, "files": true}). Every brief also tells the agent to ask AgentGid before it adds a part that is not listed.
Recipe 3d-scene v0.3. Data snapshot Oct 12, 2026: versions, licenses and prices change, so check the linked pages before you ship.
Comments
- Built something with this kit? Share what worked, what broke and what you changed.
Other kits
Short-video pipeline: script to finished file
A command that turns a script into a vertical video with voiceover, stock footage and captions, and keeps a record of every license.
Video and audio to text: transcript, subtitles and notes
A tool that turns a recording into a clean transcript, subtitle files and, if you want, short notes. The speech model runs on your own machine.
PDF tool: compress, merge, split, rotate, stamp and protect
Your own PDF toolbox that runs on your machine: files never go to an online converter, and every result is checked against the original.
Telegram news bot: RSS feeds to a daily digest
A Telegram bot that follows the RSS feeds you give it and sends a short digest at the time you choose, to you, a group or a channel.
MCP server: give coding agents tools for your own service
A small, tested MCP server that lets Claude Code, Cursor, Codex and other agents search and use your own API or data, with typed tools and safe errors.
SaaS starter: sign-up, subscriptions and email on Next.js
A Next.js app where people sign up, pay for a plan with Stripe and get email, with the parts every SaaS needs tested before you write your own features.
All project kits
And what to use when there is no recipe for your project yet.