Skip to content
Get packs

Mouse-Driven 3D Orbit

Adds subtle, cursor-responsive camera and object parallax to a Three.js hero scene.

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

What it does

When installed, the agent knows how to add a gentle, cinematic mouse-follow effect to a 3D hero section on a web page. The page's camera and some 3D objects shift slightly as the pointer moves, creating depth, while text and controls move a little too. The skill includes guidance on smoothing the motion, respecting reduced-motion preferences, keeping the layout intact at different screen sizes, and cleaning up resources.

Great for

  • Front-end developers building animated 3D landing-page heroes with Three.js
  • Designers prototyping pointer-responsive scenes who will hand the result to developers
  • Teams who want passive depth effects rather than draggable product viewers

Skip it if

  • Product viewers where users must rotate, zoom, or inspect a model (the skill says OrbitControls is the better choice for that)
  • Gameplay or drag-based cameras, which the skill itself points to a different skill for
  • Projects that do not use Three.js, since the guidance is specific to that library

Try asking

  • “Add a subtle mouse-driven parallax orbit to my Three.js hero section”
  • “Make the 3D background respond to the cursor without touch dragging, and keep it accessible with reduced motion support”
  • “Recreate the demo/index.html orbit effect in my existing Three.js scene”
Step-by-step guide: how to use Mouse-Driven 3D OrbitInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    add-mouse-driven-orbit.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip add-mouse-driven-orbit.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip add-mouse-driven-orbit.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 your existing scene and layout so it can preserve the center composition and test extreme pointer corners
  • Ask for the reduced-motion still and keyboard X/Y controls if the page needs accessibility support
  • Profile the underlying scene draw before adding the interaction, since the skill notes the orbit math itself is cheap

What's inside

  • agents/openai.yaml
  • demo/index.html
  • demo/PROMPT.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.