Una web que se desmonta al hacer scroll

Capítulo 1

Lo que vas a montar

Una landing de unos auriculares inventados, OKTAV One. Al bajar, un auricular se abre pieza a pieza (carcasa, almohadillas, driver, micrófonos y batería) y al lado aparece qué es cada cosa. Después se vuelve a montar, puedes cambiarle el color y la página acaba con las cifras y el precio.

Ver la demo →

Las tres piezas que hacen el efecto, por si te las nombra Claude:

Capítulo 2

Lo que necesitas

Paso 1

Abre Claude Code

Claude Code es la versión de Claude que trabaja dentro de una carpeta de tu ordenador: crea archivos, los cambia y los abre en el navegador para comprobarlos.

Paso 2

Instala las dos skills

Una skill es un manual que Claude lee antes de trabajar. Sin estas dos, la web sale correcta pero con la cara de siempre de las webs hechas con IA. Con ellas, Claude cuida la tipografía, el color y el movimiento.

/plugin install frontend-design@claude-plugins-official

Instálate las skills oficiales de GSAP de este repositorio: https://github.com/greensock/gsap-skills
Cuando acabes, dime qué skills tienes instaladas.

Paso 3

El prompt

Este es el prompt que da la web de la demo. Tiene tres partes: qué vendes, qué tiene que pasar al bajar y con qué herramientas. La última línea es la más importante: hace que Claude la revise él mismo antes de enseñártela.

Quiero una landing page de una sola página para unos auriculares de diadema de una marca inventada, OKTAV One.

Lo principal: cuando el usuario hace scroll, los auriculares se desmontan pieza a pieza (vista despiezada) y al lado aparece un texto corto explicando cada pieza: carcasa, almohadillas, driver, micrófonos y batería. Al seguir bajando se vuelven a montar.

- Los auriculares en 3D con Three.js, modelados con código pieza a pieza (sin imágenes). Materiales realistas: aluminio, piel, fibra de carbono.
- Animaciones con GSAP y ScrollTrigger, y scroll suave con Lenis.
- Usa la skill frontend-design para el diseño y las skills de GSAP para las animaciones.
- Secciones: portada con titular y botón de reservar, el despiece, un selector de 3 colores que cambia el color del casco en directo, cifras clave y cierre con precio.
- Corta, de landing. Que se vea bien en móvil.
- Todo en un solo archivo index.html que pueda abrir con doble clic.

Cuando acabes, ábrela en el navegador y comprueba tú mismo que el despiece se ve bien antes de enseñármela.

Tarda unos minutos. Cuando termine, abre la carpeta y haz doble clic en index.html: se abre en tu navegador. Necesita internet, porque las librerías se cargan de fuera.

Paso 4

Retócala hablando

A la primera no sale perfecta, y es normal. Baja despacio por la web, apunta lo que no te gusta y díselo como se lo dirías a un diseñador. Estas son las cuatro correcciones que hicieron falta en la demo:

Capítulo final

Para tu propio producto

El prompt sirve para cualquier cosa que tenga piezas o capas. Cambia tres cosas y deja el resto igual:

1. El producto. Unas zapatillas (suela, espuma, tejido), un reloj, una cafetera, una mochila. Cuantas más piezas distintas, mejor queda el efecto.
2. Las piezas y lo que dice de cada una. Dale tú los textos si los tienes. Si no, Claude se los inventa, y tendrás que revisar que sean ciertos antes de publicar.
3. Las secciones. Quita el selector de colores si no tiene sentido, y cambia el cierre por lo que quieras que haga la gente: reservar, escribirte o pedir presupuesto.

Y si lo que vendes no tiene piezas (un servicio, un curso), cambia la idea del despiece por otra cosa que pase al bajar: un proceso que se va montando paso a paso, o un antes y un después.

Por si acaso

Si algo no sale