Guide · Agent skill
How to use the Build Three.js Scroll Worlds agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The build-threejs-scroll-worlds skill is a set of instructions that teaches an AI coding agent how to build a 3D web page in which one live Three.js scene stays on screen while the visitor scrolls, and the camera, lighting, fog, objects and text change through a sequence of chapters. This guide explains what the skill does, how to install it from our page, how to ask for a scroll world in plain language, and what to check before you ship. You do not need prior experience with agent skills.
Build Three.js Scroll WorldsMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the build-threejs-scroll-worlds ZIP from our page. The skill is published under the MIT licence.
- 2Install it. Unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ in a project. In the Claude apps, upload the ZIP under Settings → Capabilities → Skills.
- 3Prepare your project. Make sure the project uses Three.js with a web build or bundler. Gather any models, textures, audio and copy you plan to use.
- 4Describe the experience. Write a plain request that states the subject, audience, ordered story beats and the kind of journey you want through the scene.
- 5Review the world bible and chapter plan. Before code is written, check the agent's visual rules and chapter list. Each chapter should change the camera, light, fog, objects or interactions, not only the copy.
- 6Test on real devices. Run the page in a WebGL-capable browser at desktop and mobile sizes. Check each chapter, reverse scrolling, interactions and performance, following the skill's QA reference.
What the skill makes the agent do
Without the skill, an agent will often build a 3D page as a stack of sections, each with its own small scene. This skill steers the agent toward one persistent Three.js world. The renderer and scene graph stay alive, and native document scroll drives a single normalized scroll state that moves the camera and the story through authored chapters.
The skill asks the agent to work in a fixed order. It first gathers what is unknown about the subject, audience, story beats, devices and asset budget. It then writes a world bible (visual rules for scale, palette, materials, lighting, fog and motion) and a chapter plan. Only after that does it build the scene with Three.js and check quality and performance before finishing.
- Plans the world and chapters before writing code
- Keeps one renderer and one persistent scene, with objects that stay spatial and clickable
- Stores chapter settings as data (camera, light, fog, copy, focus, interactions, assets)
- Checks visual quality, interactions, fallbacks and performance against its QA reference
Install the skill from our page
Download the skill as a ZIP from our page. The skill is named build-threejs-scroll-worlds and is published under the MIT licence. You can install it in one of two ways.
Option 1 is a personal install: unzip the download into ~/.claude/skills/ so the skill is available across your projects. Option 2 is a project install: unzip it into the .claude/skills/ folder inside a specific project. Option 3, in the Claude apps, is to upload the ZIP under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Single project: .claude/skills/ inside the project folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
~/.claude/skills/build-threejs-scroll-worlds/Trigger the skill with natural requests
You do not need special syntax. Describe the experience you want in plain words that match the skill's scope: 3D scrollytelling, scroll-driven WebGL worlds, camera journeys, interactive portfolios, product stories, exhibitions, explainers, or multi-scene sites where scrolling moves through one continuous place. The skill's description says it is not limited to landing pages.
If the agent does not pick the skill up, name it directly. Our demo prompt uses the form $build-threejs-scroll-worlds at the start of the request.
- Build a scroll-driven 3D portfolio where the camera flies past my five projects in one room.
- Make a product story page with Three.js where the bottle lights and fog change as I scroll through four chapters.
- Create an exhibition microsite in WebGL where the visitor moves through a single spatial world, with clickable exhibits.
- Use $build-threejs-scroll-worlds to turn this experience into one persistent Three.js world with camera waypoints and chapters.
What you need before you start
The skill assumes a web project that already uses Three.js with a web build or bundler. The finished page needs a browser with WebGL support. Any 3D models, textures, brand assets, audio and copy are optional inputs that you supply; the skill does not provide them.
The skill guides the agent toward real-time geometry and an initial-load and total-download budget. Ask for those budgets up front if you have them. Plan for capable hardware: the skill's quality bar assumes it.
- Three.js in a web build or bundler
- A browser with WebGL support
- Your own models, textures and audio, if you want them
- Your own copy and brand material
Understand how a chapter is structured
The skill asks the agent to store each chapter as data rather than scattering thresholds through CSS and the render loop. A chapter records its story beat, camera endpoint, lighting and fog state, interaction targets, DOM copy, and responsive overrides. The skill says to reject a chapter that differs only by copy.
Use this structure to review the agent's output. If a chapter has no change to camera, light or objects, ask the agent to merge it or give it a real visual change. The skill's own example uses a chapters array like this:
- Use 4–8 chapters for most experiences.
- Each chapter has a camera endpoint with a separate mobile override.
- Each chapter lists the assets and interactions it depends on.
const chapters = [ { id: "threshold", scrollWeight: 1.25, copy: { eyebrow: "Chapter 01", title: "Enter the archive", body: "A spatial collection revealed through motion." }, camera: { position: [0, 3.8, 13.5], target: [0, 2.4, -8], fov: 38 }, focus: ["gate", "lantern-left"], interactions: ["inspect-gate"] } ];Choose between this skill and simpler options
This skill is for experiences where objects must stay truly spatial and interactive while scroll moves through several compositions in one live WebGL world. The skill itself says that simpler approaches are sometimes better. A single interactive 3D viewer or a simple landing page does not need this heavy planning.
The skill's related routes are named in its instructions: threejs for a single interactive scene with no scroll journey, scroll-world-storytelling for choosing between real-time 3D, pre-rendered video and DOM-first storytelling, scroll-scrubbed-visual-sequence for a video or image sequence scrubbed by scroll, and cinematic-scroll-storytelling for DOM-first GSAP and Lenis choreography. Those skills are separate; check whether you have them installed.
- Single 3D viewer or static landing page: use a simpler approach.
- Exact pre-rendered video feel: the skill favours real-time geometry, which costs more to load and run.
- Weak or mostly mobile devices: the quality bar assumes capable hardware.
- DOM-first scroll animation without 3D: consider cinematic-scroll-storytelling.
What people use it for
- A scroll-driven 3D portfolio where the camera moves past project pieces inside one continuous space.
- A product story where light, fog and materials change across chapters while the product stays on screen.
- An exhibition microsite with clickable, spatial exhibits that remain in one scene as the visitor scrolls.
- A game or film teaser website that moves the camera through a single atmospheric world with on-page text.
Frequently asked questions
How do I install the build-threejs-scroll-worlds skill?
Download the ZIP from our page and unzip it into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project. In the Claude apps, you can upload the ZIP under Settings → Capabilities → Skills.
Is the build-threejs-scroll-worlds skill free?
The skill is published under the MIT licence, as stated on our page. Check the licence file in the download for the full terms.
What do I need to use this skill?
You need a web project that uses Three.js with a web build or bundler, and a browser with WebGL support. Models, textures and audio are optional and supplied by you.
Does the skill run scripts or use the network?
According to our listing, the skill does not run scripts and does not use the network. The file references/scroll-conductor.js is a portable conductor you can copy into your own project if you need it.
Why isn't my agent using the skill?
Name it directly in your request, for example with $build-threejs-scroll-worlds at the start. Also confirm the folder is in ~/.claude/skills/ or the project's .claude/skills/, or that the ZIP was uploaded under Settings → Capabilities → Skills.
How is this different from a pre-rendered video scroll page?
A video scroll page plays back pre-generated frames. This skill builds real-time Three.js geometry, materials, lighting, raycasting and camera control, so objects stay interactive. That costs more to load and run, especially on weaker devices.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or designer building a 3D scrollytelling page, scroll-driven portfolio, product story or exhibition microsite where objects must stay spatial and clickable. Pick something simpler if you need a static landing page, a single 3D viewer, an exact pre-rendered video feel, or a page for low-end mobile audiences.
Download the skill