Open 3D Skills: eight skills for sites that move
Open 3D Skills is a pack of eight agent skills by exploraX for building 3D and animated websites: three.js scenes built from code, scroll-scrubbed films, transparent video, cursor-following characters and exploded views, plus skills that check the page in real browsers and record it at 60 fps.
npx skills add Moh4696/open-3d-skillsA product that turns as you scroll, a machine that comes apart on a slider, a painted character whose head follows the cursor: Open 3D Skills gives a coding agent the method and the scripts for each. The pack holds eight skills, and two of them check and record the result. exploraX publishes it under the MIT license for Claude Code, Codex, Cursor and Gemini CLI. Anthropic doesn't publish it. If skills are new to you, read what Claude skills are.
The eight skills
- threejs-scene builds buildings, vehicles, machines and landscapes from procedural geometry, starting from a pavilion scene. Its budget for a laptop GPU is under 10 ms a frame and 300 draw calls.
- scroll-film turns scrolling into playback. Generated clips are joined into one film with holds where captions sit, and a seam checker fails any join that jumps.
- motion-assets prices the job first. It lists every image and clip with its exact prompt and cost, then waits for a yes.
- alpha-cutout keys clips shot on a flat chroma plate into transparent video, including a stacked-alpha MP4 that plays in Safari.
- cursor-rig renders the head as a grid of poses on one fixed body. With 19 yaw steps and 8 pitch rows, the turn reads as continuous.
- exploded-view adds staged explode, x-ray, a section cut and labels with leader lines, on code-built models or loaded GLB files.
- site-check shoots the page in headless Chromium and WebKit at 1440, 768 and 390 px wide. It exits with an error on page errors, failed requests, blank canvases or horizontal overflow.
- frame-capture runs the page on a virtual clock, so a scene that renders slowly still records as smooth 60 fps MP4.
The README's order is plan, build, check, record, though each skill also works alone.
How to install it
As a Claude Code plugin:
/plugin marketplace add Moh4696/open-3d-skills
/plugin install open-3d-skills@open-3d-skills
The skills are then namespaced, as in open-3d-skills:threejs-scene. With Node 22.20 or newer, npx skills add Moh4696/open-3d-skills --skill threejs-scene installs one skill; drop --skill to choose from the list. Or copy one skill's folder by hand:
git clone https://github.com/Moh4696/open-3d-skills
mkdir -p ~/.claude/skills && cp -r open-3d-skills/skills/threejs-scene ~/.claude/skills/
The scripts need Python 3.9+ with the repo's requirements.txt (Playwright, Pillow, NumPy, OpenCV), then python3 -m playwright install chromium webkit, and ffmpeg on your PATH.
Example request
Use open-3d-skills:threejs-scene. Build a 3D hero of [subject] from code, using [real dimensions or reference photos]. Give it the golden light preset and vantages for [front, aerial]. Then run site-check at laptop and phone widths and show me the contact sheet.
Limits
- Half the pack needs a generation service. motion-assets, alpha-cutout, cursor-rig and scroll-film depend on an image and video model of your choice, and each attempt is billed by that service. The other four need none. The author built them with Higgsfield, MiniMax, Kling, Seedance and Nano Banana.
- No price list. motion-assets calibrates by running one still and one short clip and reading what was charged, and it's told never to quote a price from memory. A portrait version of a scroll film for phones doubles the video cost.
- The starter loads three.js from a CDN. Its import map points at jsDelivr until you vendor the files.
- Real subjects get a disclaimer. A scene of a real place, object or brand is labelled as an unofficial study, without logos.
- The shell installer pipes a script. One README route pipes install.sh from GitHub into bash. The plugin and the manual copy above avoid that.
When to use it
Pick it for a landing page where the product has to turn, open up or fly past as the visitor scrolls. For art direction of the page around the 3D, pair it with Taste Skill, which the README itself recommends.
Sources
- Moh4696/open-3d-skills README on GitHub, accessed November 2026
- threejs-scene SKILL.md on GitHub, accessed November 2026
- motion-assets SKILL.md on GitHub, accessed November 2026