Skip to content
Get packs

Build Three.js Scroll Worlds

Lets an agent build scroll-controlled, real-time 3D Three.js websites with one continuous world

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
8 files

What it does

When installed, the agent plans and writes web code for immersive 3D pages where a single live 3D scene stays on screen while the visitor scrolls, and the camera, lighting, fog, objects and on-page text change through a sequence of chapters. It guides the agent to write a design bible and a chapter plan first, then build the scene with Three.js, and check quality and performance before finishing. It also helps the agent choose between this approach and simpler options such as pre-rendered video or plain page-section storytelling.

Great for

  • Front-end developers building 3D scrollytelling or WebGL marketing pages
  • Designers who want a scroll-driven 3D portfolio, product story or exhibition microsite
  • Teams prototyping an interactive explainer where objects must stay spatial and clickable

Skip it if

  • Simple static landing pages or single 3D viewers, where the skill's heavy planning adds cost without benefit
  • Projects that need an exact pre-rendered video feel, since the skill explicitly favours real-time geometry, which is more costly to load and run on weak devices
  • Low-end mobile-first audiences, because the skill's quality bar assumes capable hardware and large asset budgets

Try asking

  • “Build a 3D scroll story that takes visitors through the chapters of our museum exhibit, with the camera moving through one continuous room”
  • “Create a product microsite where scrolling reveals the product from different angles with changing light and fog”
  • “Make an interactive portfolio where a single 3D world changes palette and camera as the visitor scrolls”
  • “Turn this brand brief into a scroll-controlled Three.js world with a chapter ledger and mobile camera overrides”
Step-by-step guide: how to use Build Three.js Scroll WorldsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 8 original files, the MIT licence and an attribution note.

    build-threejs-scroll-worlds.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip build-threejs-scroll-worlds.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip build-threejs-scroll-worlds.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent a reference scene, brand assets and a load budget up front so it does not invent visual details
  • Ask for a chapter ledger and world bible before code, and review the chapter count (4-8 is typical)
  • Test on a real mid-range phone, since the skill's mobile overrides and performance gates only help if checked on hardware

What's inside

  • agents/openai.yaml
  • demo/PROMPT.md
  • references/kage-anatomy.md
  • references/quality-and-qa.md
  • references/realtime-architecture.md
  • references/scroll-conductor.js
  • references/world-bible.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.