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
- Identifica qué familia cubre la petición en la tabla de abajo.
- Abre el
references/<doc>.md de esa familia y sigue la receta (Track 1 por defecto).
- Adapta el
examples/<demo>.html correspondiente — es código real y ejecutable.
- 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)
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.- 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.
- Responsive: degrada en pantallas pequeñas (móvil = poster o modelo estático en vez de
secuencia completa).
- Assets:
.glb con Draco, HDRI para el entorno, y exporta las secuencias en WebP. Ver
references/assets-pipeline.md.
- 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.
1---2name: exploded-view3description: exploded-view4---56# exploded-view78Guía para construir frontends con **modelos 3D y animaciones de render** al estilo MadRams:9modelos girables con iluminación HDR, shaders custom, explosión radial, rotación al scroll,10turntables de renders y trayectorias SVG. Cada técnica trae **receta copy-paste + demo11ejecutable**.1213## Cómo usar esta skill14151. Identifica qué **familia** cubre la petición en la tabla de abajo.162. Abre el `references/<doc>.md` de esa familia y sigue la receta (Track 1 por defecto).173. Adapta el `examples/<demo>.html` correspondiente — es código real y ejecutable.184. Aplica siempre las **reglas transversales** (más abajo).1920Para ver todos los demos en el navegador: `exploded-view examples` (o `npm run examples`).21Para listar el catálogo en terminal: `exploded-view list`.2223## Familias de técnicas2425| Petición del usuario | Familia | Referencia | Demo |26|---|---|---|---|27| "modelo 3D girable con HDR", "que se vea con buena iluminación", model-viewer | **A** | `references/model-viewer-hdr.md` | `examples/hdr-model.html` |28| "explosión radial", "vista explosionada", "que se desarmen las piezas al scrollear" | **B** | `references/threejs-exploded.md` | `examples/exploded.html` |29| "que rote al scrollear", "scroll rotation" | **B** | `references/threejs-scroll-rotate.md` | `examples/scroll-rotate.html` |30| "shader de papel", "toon", "blueprint entintado", outline | **B** | `references/shader-paper-toon.md` | `examples/paper-shader.html` |31| "turntable", "secuencia de renders", "que gire el auto al bajar", frames WebP | **C** | `references/frame-sequence.md` | `examples/frame-sequence.html` |32| "trazos que se dibujan", "un punto siguiendo una trayectoria", circuit traces SVG | **D** | `references/svg-trajectories.md` | `examples/svg-trajectory.html` |33| "¿Anime.js o GSAP?", elegir librería de animación | — | `references/animation-libs.md` | — |34| Comprimir .glb, HDRI, exportar frames, deploy | — | `references/assets-pipeline.md` | — |3536## Dos tracks3738- **Track 1 — Vanilla + CDN (por defecto).** HTML/CSS/JS, `<model-viewer>` + Three.js vía CDN,39 cero build. Es el track de los demos. Úsalo salvo que el proyecto ya tenga React/Vite.40- **Track 2 — React Three Fiber + Vite.** Recetas equivalentes (drei `<Environment>`,41 `useFrame`, `<ScrollControls>`) dentro de cada doc de las familias A y B. Elígelo solo si el42 proyecto ya usa React con build. Las familias C y D son agnósticas.4344## Librerías de animación4546Documentadas en `references/animation-libs.md`. Regla corta:4748- **CSS puro** para draw-on de trazos y pop-ins simples.49- **GSAP + ScrollTrigger** (recomendado) para lo atado a scroll: explosión radial, scroll-rotate,50 scrub del turntable — por su control de `scrub`, `pin` y `snap`.51- **Anime.js** para reveals, counters y timelines no ligados a scroll (fiel a los repos MadRams).5253## Reglas transversales (SIEMPRE)54551. **`prefers-reduced-motion: reduce`**: todo efecto debe tener un fallback estático. Los modelos56 se quedan quietos, los turntables muestran poster, los trazos aparecen ya dibujados.572. **Carga progresiva / lazy**: poster o placeholder inmediato; el 3D y las secuencias cargan sin58 bloquear el primer render. En móvil, considera omitir descargas pesadas.593. **Responsive**: degrada en pantallas pequeñas (móvil = poster o modelo estático en vez de60 secuencia completa).614. **Assets**: `.glb` con Draco, HDRI para el entorno, y exporta las secuencias en WebP. Ver62 `references/assets-pipeline.md`.635. **Deploy GitHub Pages**: rutas relativas y `.nojekyll` (los repos MadRams son project-pages).6465## Alcance6667Es una guía + demos, no un generador. No produce tus modelos ni renderiza tus frames (documenta68el pipeline). Los demos usan **geometría procedural** para correr sin binarios; sustituye los69placeholders marcados con `// SUSTITUYE:` por tus assets reales. Para QA visual del resultado,70usa la skill hermana **websight**.
luisxavierxd