# Exploded View

> exploded-view

- Skill: `luisxavierxd/exploded-view` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add luisxavierxd/exploded-view`
- Raw SKILL.md: https://api.skillmd.com/api/skills/luisxavierxd/exploded-view/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: luisxavierxd (https://skillmd.com/u/luisxavierxd)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/luisxavierxd/exploded-view

---


# exploded-view

Guía para construir frontends con **modelos 3D y animaciones de render** al estilo MadRams:
modelos girables con iluminación HDR, shaders custom, explosión radial, rotación al scroll,
turntables de renders y trayectorias SVG. Cada técnica trae **receta copy-paste + demo
ejecutable**.

## Cómo usar esta skill

1. Identifica qué **familia** cubre la petición en la tabla de abajo.
2. Abre el `references/<doc>.md` de esa familia y sigue la receta (Track 1 por defecto).
3. Adapta el `examples/<demo>.html` correspondiente — es código real y ejecutable.
4. Aplica siempre las **reglas transversales** (más abajo).

Para ver todos los demos en el navegador: `exploded-view examples` (o `npm run examples`).
Para listar el catálogo en terminal: `exploded-view list`.

## Familias de técnicas

| Petición del usuario | Familia | Referencia | Demo |
|---|---|---|---|
| "modelo 3D girable con HDR", "que se vea con buena iluminación", model-viewer | **A** | `references/model-viewer-hdr.md` | `examples/hdr-model.html` |
| "explosión radial", "vista explosionada", "que se desarmen las piezas al scrollear" | **B** | `references/threejs-exploded.md` | `examples/exploded.html` |
| "que rote al scrollear", "scroll rotation" | **B** | `references/threejs-scroll-rotate.md` | `examples/scroll-rotate.html` |
| "shader de papel", "toon", "blueprint entintado", outline | **B** | `references/shader-paper-toon.md` | `examples/paper-shader.html` |
| "turntable", "secuencia de renders", "que gire el auto al bajar", frames WebP | **C** | `references/frame-sequence.md` | `examples/frame-sequence.html` |
| "trazos que se dibujan", "un punto siguiendo una trayectoria", circuit traces SVG | **D** | `references/svg-trajectories.md` | `examples/svg-trajectory.html` |
| "¿Anime.js o GSAP?", elegir librería de animación | — | `references/animation-libs.md` | — |
| Comprimir .glb, HDRI, exportar frames, deploy | — | `references/assets-pipeline.md` | — |

## Dos tracks

- **Track 1 — Vanilla + CDN (por defecto).** HTML/CSS/JS, `<model-viewer>` + Three.js vía CDN,
  cero build. Es el track de los demos. Úsalo salvo que el proyecto ya tenga React/Vite.
- **Track 2 — React Three Fiber + Vite.** Recetas equivalentes (drei `<Environment>`,
  `useFrame`, `<ScrollControls>`) dentro de cada doc de las familias A y B. Elígelo solo si el
  proyecto ya usa React con build. Las familias C y D son agnósticas.

## Librerías de animación

Documentadas en `references/animation-libs.md`. Regla corta:

- **CSS puro** para draw-on de trazos y pop-ins simples.
- **GSAP + ScrollTrigger** (recomendado) para lo atado a scroll: explosión radial, scroll-rotate,
  scrub del turntable — por su control de `scrub`, `pin` y `snap`.
- **Anime.js** para reveals, counters y timelines no ligados a scroll (fiel a los repos MadRams).

## Reglas transversales (SIEMPRE)

1. **`prefers-reduced-motion: reduce`**: todo efecto debe tener un fallback estático. Los modelos
   se quedan quietos, los turntables muestran poster, los trazos aparecen ya dibujados.
2. **Carga progresiva / lazy**: poster o placeholder inmediato; el 3D y las secuencias cargan sin
   bloquear el primer render. En móvil, considera omitir descargas pesadas.
3. **Responsive**: degrada en pantallas pequeñas (móvil = poster o modelo estático en vez de
   secuencia completa).
4. **Assets**: `.glb` con Draco, HDRI para el entorno, y exporta las secuencias en WebP. Ver
   `references/assets-pipeline.md`.
5. **Deploy GitHub Pages**: rutas relativas y `.nojekyll` (los repos MadRams son project-pages).

## Alcance

Es una guía + demos, no un generador. No produce tus modelos ni renderiza tus frames (documenta
el pipeline). Los demos usan **geometría procedural** para correr sin binarios; sustituye los
placeholders marcados con `// SUSTITUYE:` por tus assets reales. Para QA visual del resultado,
usa la skill hermana **websight**.