threejs-architecture-effects: have your agent build a real, orbitable 3D building

npx skills add lhlGitHub/threejs-architecture-effects --skill threejs-architecture-effects

Ask a coding agent for a “3D building construction animation” and you usually get an image that fades in, or a video pinned to a plane — it looks right until you try to drag it. threejs-architecture-effects, an MIT-licensed skill by Hailey (repo created September 22, 2026, 301 stars as of September 27, 2026), refuses that shortcut: the deliverable is a real Three.js scene of solid parts assembling themselves, orbitable, zoomable, and scrubbable on a timeline.

The order it works in

The skill imposes an assembly sequence: foundations → load-bearing frame → masonry courses → floor decks → upper walls → brackets, eaves and tiles → ornament. The finished silhouette gets modeled first so every part shares dimensions and nothing floats; each solid component then gets a start time, a duration and a travel distance, and the whole scene is driven by a single 0–1 progress value that the color and shadow shaders both read. That shared value is why scrubbing backward, pausing and replaying stay deterministic — the second run matches the first frame for frame.

What it forbids

• Screenshots on planes: no pasting an image onto geometry, no alpha-fading walls into existence — every part is real geometry.
• Shaders that disagree: color and shadow must share one progress value, or the shadow detaches from the growth when you scrub.
• Post-processing as cover-up: no fog, bloom or boosted brightness to hide crude joints; brick, wood, plaster, tile, stone and bronze each get separately authored color, roughness and micro-height.
• Overclaiming: no museum quality, no historical accuracy, no “60 FPS everywhere” declared from one screenshot.

Who it’s for

Frontend and creative developers who want a building that grows itself — portfolios, tourism and event pages — without hand-writing the assembly timeline. Copy the repo into ~/.claude/skills/ (or Codex / Cursor’s equivalent) and ask for a pavilion. It also works without an agent: node threejs-architecture-effects/scripts/scaffold.mjs ./my-building copies a self-contained Vite + React + Three.js starter that runs with npm ci && npm run dev.

It is web-only and desktop-first: Node 22.13+, a WebGL2-capable browser, no video export — record the screen if you need a clip. The bundled clock tower is a working demo, not a historical restoration.