Creating 3D Animated Site — Development skill for Claude Code

creating-3d-animated-site

A [Cursor](https://cursor.com) and [Claude Code](https://claude.com/claude-code) skill that scaffolds a **single-page 3D product teardown** from a required title and optional colors. The agent models the named object into `src/subject.js`. Copy, colors, and **view** live in `src/config/site.js`. A persistent Three.js WebGL canvas fills the viewport; overlay chapters ride a 620vh scroll track.

Not a 2D photo + GSAP marketing page (that is creating-motion-site). Not a horizontal-scroll résumé camera (that is scroll-portfolio). Not a spinning primitive in a void.

Install

Claude Code:

git clone https://github.com/KanchanaSW/3d-animated-site-skill ~/.claude/skills/creating-3d-animated-site

Cursor:

git clone https://github.com/KanchanaSW/3d-animated-site-skill ~/.cursor/skills/creating-3d-animated-site

Or, from a local checkout, symlink into both runtimes:

chmod +x scripts/install.sh
./scripts/install.sh

That links:

• ~/.cursor/skills/creating-3d-animated-site — Cursor
• ~/.claude/skills/creating-3d-animated-site — Claude Code

Both runtimes pick up `SKILL.md` on the next session. Then, in any project:

1. Give a title (required). Colors and view are optional — hex, names, or omit them and the skill picks a mood palette and a named view from the object.
2. Ask with one of the commands below. Title is required. The agent must ask and stop if you omit it.

**Let the skill pick the view** (from the object):

Create a 3D animated site titled Harbor & Pine

Create a 3D animated site titled Nova Lab, colors #0B0B0F and #7CFF6B

**Name the view** — one command per layout:

Create a 3D animated site titled Mechanical, view dossier

Create a 3D animated site titled Eclipse, view plinth

Create a 3D animated site titled Cabinet of Hours, view vitrine

Create a 3D animated site titled Northbench Atelier, view atelier

Create a 3D animated site titled Press Marks, view folio

Colors st