skill
exploded-view
Web-native 3D presentation skill for Claude: orbit viewers, exploded assemblies, and animated camera walkthroughs — model-viewer + Three.js + Draco, zero build.
Set up
Skills are installed by placing their folder where your agent loads skills.
The download comes from github.com/luisxavierxd/exploded-view itself, not from our server, so what you get is exactly what its author published.
Install instructions come from the README
README
synced Oct 27, 2026exploded-view
Guía de implementación para modelos 3D y animaciones de render en frontend, al estilo de los cursos MadRams: modelos girables con iluminación HDR, shaders custom (papel/toon/blueprint), explosión radial de piezas, rotación al scrollear, turntables de renders pre-renderizados y trayectorias SVG. Cada técnica trae una receta copy-paste (Vanilla + CDN y React Three Fiber) y un demo ejecutable.
Es una skill de conocimiento: su valor está en SKILL.md + references/ + examples/. El
CLI es opcional y solo sirve los demos localmente (sin dependencias, no descarga nada).
Familias de técnicas
| Familia | Qué resuelve | Referencia | Demo |
|---|---|---|---|
| A | Modelo girable con HDR (<model-viewer>) | references/model-viewer-hdr.md | examples/hdr-model.html |
| B | Explosión radial / vista explosionada (Three.js) | references/threejs-exploded.md | examples/exploded.html |
| B | Rotación al scrollear | references/threejs-scroll-rotate.md | examples/scroll-rotate.html |
| B | Shader de papel / toon / blueprint | references/shader-paper-toon.md | examples/paper-shader.html |
| C | Turntable de secuencia de renders | references/frame-sequence.md | examples/frame-sequence.html |
| D | Trayectorias SVG (draw-on, motion-path) | references/svg-trajectories.md | examples/svg-trajectory.html |
| — | Elegir librería (Anime.js / GSAP / CSS) | references/animation-libs.md | — |
| — | Assets: Draco, HDRI, export de frames, deploy | references/assets-pipeline.md | — |
Instalación
Requiere Node.js ≥ 20. Sin postinstall — la instalación es instantánea.
Instalar el CLI global directo desde GitHub:
npm install -g github:luisxavierxd/exploded-view
O clonar para trabajarlo localmente:
git clone https://github.com/luisxavierxd/exploded-view.git
cd exploded-view
npm link # (opcional) expone el bin `exploded-view`
Como plugin de Claude Code
El repo es también un marketplace/plugin de Claude Code autocontenido:
/plugin marketplace add luisxavierxd/exploded-view
/plugin install exploded-view@exploded-view
Instala la skill que enseña al agente a construir estas técnicas 3D. El plugin aporta la skill; el CLI (opcional) solo sirve los demos.
CLI
# Sirve los demos ejecutables en el navegador
exploded-view examples [--port N] # por defecto 8788
# Lista las familias, sus docs y sus demos
exploded-view list
Sin instalar globalmente, sustituye exploded-view por node cli.js.
Demos
Viven en examples/ y corren sin binarios: usan geometría procedural, HDRI generado y una
secuencia de frames dibujada en canvas al vuelo. Las librerías 3D (three, <model-viewer>,
gsap, anime.js) se cargan por CDN, así que los demos necesitan internet — igual que los
repos MadRams. Cada demo marca con // SUSTITUYE: dónde meter tu .glb, tu HDRI y tu secuencia
real.
Dos tracks
- Track 1 — Vanilla + CDN (por defecto, y el de los demos): fiel a los repos MadRams, cero build.
- Track 2 — React Three Fiber + Vite: recetas equivalentes para las familias A y B dentro de cada doc. Elígelo solo si el proyecto ya usa React con build.
Tests
npm test # node --test (cli + sincronía guía/demos)
Alcance
Es una guía + demos, no un generador: no crea tus modelos ni renderiza tus frames (documenta el
pipeline en references/assets-pipeline.md). Para QA visual del resultado en el navegador,
usa la skill hermana websight.
Licencia
MIT © 2026 Luis Xavier García Pimentel Ascencio