Guide · Agent skill
How to use the Mouse-Driven 3D Orbit agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The add-mouse-driven-orbit skill is a set of instructions that teaches an AI coding agent how to add a subtle, cinematic mouse-follow effect to a Three.js 3D hero section. The camera and some 3D objects shift slightly as the pointer moves, and text and controls move a little too, which creates depth without letting the visitor drag the scene around. This guide covers what the skill does, how to install it, how to ask for it, and where it is the wrong tool.
Mouse-Driven 3D OrbitMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip. Download the skill ZIP from this page and unzip it into a folder named add-mouse-driven-orbit.
- 2Place the skill folder. Move the folder into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder for one project. Alternatively, upload it under Settings → Capabilities → Skills in the Claude apps.
- 3Prepare your Three.js hero. Make sure the hero has a Three.js scene on a canvas and the centred layout works without pointer movement.
- 4Ask for the effect. Describe the goal in plain language and name the skill, for example with $add-mouse-driven-orbit.
- 5Review the changes. Check the pointer handler, smoothing loop, reduced-motion branch and teardown code in the files the agent edited.
- 6Test at two sizes. Check the centre pose and the pointer corners at 1440×900 and 390×844, and confirm touch input does not drive the scene.
What the skill makes the agent do
The skill takes one pointer position, smooths it over time, and splits that single value across several layers: camera translation, the camera's look-at target, and small rotations of 3D object groups. Opposing, unequal amounts make the scene pivot rather than slide as one flat piece.
The skill also covers the surrounding work: smoothing motion across refresh rates, keeping the layout intact at different screen sizes, ignoring touch dragging, respecting reduced-motion preferences, and cleaning up resources when the section is removed.
- Passive depth: the visitor does not rotate, zoom or inspect the model.
- Shared smoothing so the motion eases rather than snaps.
- A designed still image for users who prefer reduced motion.
- Cleanup of frame loops, observers, listeners and Three.js resources.
Install the skill from the ZIP
Download the ZIP for this skill from this page and unzip it. The skill folder contains SKILL.md, agents/openai.yaml, demo/index.html and demo/PROMPT.md.
For a personal install, place the unzipped skill folder inside ~/.claude/skills/. To limit it to one project, place it inside that project's .claude/skills/ folder instead.
If you use the Claude apps rather than a local folder, open Settings, go to Capabilities, then Skills, and upload the skill there.
- Personal: ~/.claude/skills/
- Single project: your project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills
Trigger the skill with a natural request
You do not need special syntax. Describe the effect you want in plain language, and mention Three.js and your hero section so the agent knows the context. The demo prompt in the source uses the explicit form $add-mouse-driven-orbit, which names the skill directly.
The skill is written for a hero that already has a 3D scene, so point the agent at the page or canvas it should modify.
- Add restrained pointer parallax to the Three.js hero in index.html, not a draggable viewer.
- Use the add-mouse-driven-orbit skill to give this hero section gentle depth as the mouse moves.
- Make the 3D background follow the cursor subtly, and keep the headline and buttons readable at all sizes.
Use $add-mouse-driven-orbit to give this Three.js hero restrained pointer depth without turning it into a draggable product viewer.Know what it needs
The skill is specific to Three.js. Your project needs a web page with a canvas or 3D scene to modify. It also relies on browser support for ResizeObserver and the prefers-reduced-motion media query.
The skill runs no scripts and uses no network access, so it works by giving the agent written guidance and code patterns to apply to your files.
- Three.js in the project
- A web page with a canvas or 3D scene
- Browser support for ResizeObserver and prefers-reduced-motion
Safety notes on scripts and network
According to the skill's metadata, it runs no scripts and uses no network. It is a set of instructions and code patterns. The agent will still write code into your project, so review the changes the way you would review any code it produces.
Check the diff before committing, especially the pointer listeners and teardown code, which should be removed when the section is unmounted.
- No scripts are run by the skill.
- No network use is declared.
- Review generated code and teardown logic before shipping.
Tips for good results
Keep the effect restrained. The skill recommends small camera and rotation values, and it warns against equal movement across layers, since that reads as a flat poster following the cursor.
Build the centred composition first and treat pointer motion as an enhancement. Verifying the four corners of the pointer range at both a desktop and a phone size catches most layout problems early.
If a scene is heavy to draw, the skill notes the orbit math is cheap; the cost is the redraw itself. Profile the scene before removing the interaction.
- Test 1440×900 and 390×844, plus touch input.
- Use the demo in demo/index.html as a working reference.
- Tab through any X/Y range controls and confirm focus is visible.
What people use it for
- Animated 3D landing-page heroes where the background responds gently to the cursor.
- Designers prototyping a pointer-responsive scene to hand over to a developer.
- Organic model parallax, where a plant-like or sculptural object shifts with depth behind text.
- Passive interactive depth on a marketing page, where a product viewer would be the wrong pattern.
Frequently asked questions
Is the add-mouse-driven-orbit skill free?
The skill is published under the MIT licence, as stated on this page. Check the licence file in the repository for the full terms before using it in a commercial project.
How do I install the add-mouse-driven-orbit skill?
Download the ZIP from this page and unzip it. Place the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder, or upload it under Settings → Capabilities → Skills in the Claude apps.
What do I need to use this skill?
You need Three.js in the project, a web page with a canvas or 3D scene to modify, and browser support for ResizeObserver and prefers-reduced-motion. The skill is specific to Three.js and will not help with projects that do not use it.
Does the skill run scripts or use the network?
No. The skill's listing says it runs no scripts and uses no network. It provides instructions and code patterns that the agent applies to your files, so you should still review the code it writes.
When should I use OrbitControls instead?
Use OrbitControls when users must rotate, zoom or inspect a model directly, such as a product viewer. The skill says OrbitControls is the better choice for that. For drag, zoom or gameplay cameras, the skill points to a different skill, build-game-camera-controls.
Will the effect work on phones and touch screens?
The skill ignores touch pointer movement and keeps the authored centre pose on coarse pointers, so passive orbit never requires touch dragging. Test the layout at a phone size such as 390×844 to confirm the composition stays complete.
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 Three.js hero where the scene should respond gently to the cursor without becoming draggable. Pick OrbitControls or a dedicated camera-control skill if users need to rotate, zoom or inspect the model, and skip it entirely if your project does not use Three.js.
Download the skill