Skip to content
AI Primer
workflow

Meng To opens a prompt-built Three.js bookshelf repo with code and prompts

Meng To released code and prompts for a scrolling bookshelf demo refined through many Codex prompts. Karpathy separately used Claude Opus 5 to turn the opening of LOTR into a 5,500-line Three.js render.

7 min read
Meng To opens a prompt-built Three.js bookshelf repo with code and prompts
Meng To opens a prompt-built Three.js bookshelf repo with code and prompts

TL;DR

  • MengTo released a working Three.js bookshelf with horizontal scrolling, openable books, page flipping, code, and prompt, with MengTo's launch post pointing to the demo, GitHub repo, and Stripe Press inspiration.
  • The build details were prompt-level, in MengTo's prompting reply he said he asked AI for vocabulary around book textures, lighting, 3D shapes, and materials, while his continuity note credited AI for most of the animations and state.
  • karpathy turned the LOTR opening paragraph into a procedural Three.js scene by giving Opus 5 a 1M-token budget, about $10, then letting it run roughly two hours and write 5,500 lines of code, according to his LOTR test.
  • The browser-game demos are playable but rough: chrisfirst's Fallout post says one version fit in a 2.3 MB HTML file, and his caveat calls the newer version a buggy tech demo.

The complete-shelf repo packs cloth, foil, page blocks, headbands, bookmarks, OrbitControls, and a state machine into one index.html. MengTo's Skills repo turns prompting habits into portable SKILL.md files, and the Sakura Crossing repo that he remixed is a no-image-asset Three.js scene with runtime Canvas2D signage. The keeper is the repeatable harness around the visuals: prompts, skills, component kits, and agent handoffs.

Bookshelf repo

MengTo's demo follows the Stripe Press shelf pattern: a horizontal row of books, each opening into a detail view with page-turning interaction. The repo summary describes a framework-free build using Three.js, OrbitControls, embedded WebP texture atlases, procedural textures, and a shelf-to-detail state machine.

The craft inventory is unusually specific:

  • Separate boards, spine, hinges, endpapers, page block, headbands, bookmark, foil, and shadows.
  • Procedural cloth, foil, paper, page-edge, wood, roughness, normal, and shadow textures.
  • Reusable book geometry with hinged groups and segmented meshes for curved page turns.
  • HTML controls and status announcements layered over WebGL for accessibility.

MengTo's customization reply said the shelf is easy to retheme with different covers. Another reply said the prompt was included so other people could make variants.

Prompt grammar for texture and motion

MengTo's most useful trick was asking the model how to prompt the thing first. In his reply, he described using AI to generate better descriptions for book textures, lighting, shapes, and 3D vocabulary, then choosing the phrasing that made sense.

The iteration loop was visual and corrective:

  • Ask for the scene.
  • Inspect textures, lighting, and small details.
  • Tell the model when frames or transitions are missing.
  • Let the model continue animation and state work.

That last point is where the demo gets interesting. MengTo's follow-up said most of the animations and state came from AI, with human intervention mainly when it missed frames.

Codex command center

MengTo's earlier 16-minute walkthrough showed his Codex workflow for prompting Three.js and shader-heavy landing pages. One reply called out the simple input pattern: giving Codex a URL.

The stack widened from one prompt into a harness. The MengTo/Skills repo describes the files as portable SKILL.md playbooks with optional references, articles, scripts, and assets for Codex, Claude, Cursor, Aura Build, Lovable, and similar agents.

MengTo's resources post pointed to:

MengTo later described his setup plainly: his command-center reply said he uses Codex as a command center, with Codex using the Claude Code CLI. In one follow-up, he offered a walkthrough to someone trying the setup.

Component kits

MengTo's component post framed animated backgrounds, text effects, buttons, image galleries, and WebGL components as inputs for AI customization rather than interactions rebuilt from scratch. The libraries he linked map to a practical creative-web stack:

  • React Bits lists 140-plus customizable animated React components, backgrounds, text effects, animations, and UI patterns.
  • Canvas UI describes framework-agnostic HTML-in-canvas and WebGL components shipping in React, Solid, Preact, Vue, Svelte, and vanilla TypeScript flavors.
  • Shaders MCP docs say an AI agent can browse saved shaders, search Pro presets, install effects, and modify props without switching context.

MengTo's paid-tools reply added Unicorn Studio and Shaders as higher-end options. MengTo's model-quality reply put the mood more bluntly: Opus 5 is getting dangerously better at Three.js and shaders.

LOTR as a 5,500-line render

karpathy's test replaced the old "pelican on a bicycle" SVG prompt with a world-building task: turn the first paragraph of The Lord of the Rings into a procedural Three.js render.

His setup in the post:

  • Input: the first paragraph of LOTR.
  • Budget: 1M tokens, roughly $10.
  • Run time: about two hours.
  • Output: 5,500 lines of code.
  • Task: place and animate polygon assets in x, y, z coordinates.

DannyLimanseta's reply joked that the LOTR trailer could replace the pelican test. karpathy's audio reply said the audio came from ElevenLabs, with voice selection done manually.

Visual auditing bottleneck

The weak point was perception, not patience. In karpathy's LOTR test, the model had to inspect screenshots slowly because it could not efficiently perceive video or play through the scene natively.

DannyLimanseta made the same point from the game-building side. His post called limited visual capability the biggest bottleneck for AI-built games, and his UI reply said models can still miss glaring misalignment in interface designs.

The result is a strange split: the model can write the renderer, but the verification loop still crawls.

Browser-game tech demos

chrisfirst's Fallout experiment compressed a browser RPG into a single HTML file. His earlier post described an explorable world with landmarks, a functional Pip-Boy, characters with dialogue trees, and a 2.3 MB file.

The prompt in chrisfirst's prompt post asked Claude Code to fan out sub-agents across:

  • Terrain and environmental storytelling.
  • Pip-Boy interface.
  • Weapon and armor systems.
  • NPC dialogue trees.
  • Atompunk 1950s art direction.
  • Hacking, lockpicking, body search, and container systems.
  • A harsh visual critic sub-agent using /loop until the output looked AAA.
  • A Three.js implementation.

chrisfirst's tooling reply said the build was all Claude Code, and another reply said the prompt had to run in Claude Code rather than regular chat. According to a We0 analysis, the broader pattern is one high-level goal plus tools, subagents, long-running execution, quality gates, and repeated iteration.

The creator caveat was blunt. chrisfirst's caveat called it a buggy mess with glitches and weak dialogue, useful as a browser tech demo rather than a finished game. thekitze's Three.js game post landed on the same constraint: games still need weeks, months, or years of polish before people play for more than a few minutes.

Sakura Crossing handoff

MengTo also ran Opus 5 for two hours to turn Sakura Crossing into an explorable Three.js version of San Francisco. His post said Codex used the Claude Code CLI so the two agents worked on the same build, packaged as a single HTML file.

The source material was already a technical flex. The Sakura Crossing repo describes a Three.js railway-crossing neighborhood on a 160 m radius planet, with runtime Canvas2D signs and no image assets in src/.

The handoff was reference-driven. MengTo's repo-reference reply said the GitHub repo was enough for the agent to work from, while his credit reply pointed back to the original Sakura Crossing project.

The limits were time and tokens. MengTo's token reply said he would revamp the UI and details with more time, and his sharing reply said he had forgotten to make the project public but planned to do so shortly.

Further reading

Discussion across the web

Where this story is being discussed, in original context.

On X· 7 threads
Bookshelf repo2 posts
Codex command center3 posts
Component kits2 posts
LOTR as a 5,500-line render2 posts
Visual auditing bottleneck1 post
Browser-game tech demos4 posts
Sakura Crossing handoff4 posts
Share on X