aeworks.tech/lab/producto-se-arma
Pantalla completa ↗ Descargar .html
← AE Lab

El producto que se arma solo

27 oct 2026· nivel avanzadoWebGL3Dscrollficha de producto

La ficha de producto que enseña lo que hay dentro: al bajar, las diez piezas de una electrobomba llegan volando, se colocan en fila con su nombre unido por una línea y se montan solas en 3D. Con un botón grande para despiezar y montar, y en el móvil se gira con el dedo.

// CÓMO ESTÁ HECHO

  1. Cada pieza se modela con figuras de torno (un perfil [x, radio] que gira alrededor del eje) y cajas, en WebGL puro y sin librerías: diez piezas en un solo archivo de 44 KB.
  2. Cada pieza tiene tres sitios: fuera (flotando y girando), despiezada (en fila a lo largo del eje) y montada. El progreso p de 0 a 1 las mueve con dos mezclas: pos = mezcla(mezcla(fuera, fila, llegar), montada, encajar).
  3. El scroll da p sin JavaScript: animation-timeline: view() anima la variable --p de 0 a 1 mientras la escena está pegada (position: sticky). Si el navegador no lo sabe, se calcula con getBoundingClientRect.
  4. Cada pieza llega y encaja con su propio retraso (llegar = suave((p − retraso) / 0,17)), en el orden real de montaje: primero el estator, luego el rotor… y al encajar, un destello verde.
  5. El detalle pro: los rótulos siguen a cada pieza en 3D. En cada fotograma se proyecta un punto de la pieza a la pantalla con la misma matriz de la cámara, se reparten para que no se pisen y se dibuja la línea con un codo. La cámara además encuadra sola lo que ocupan las piezas, dejando sitio a los textos.
  6. Accesible y en móvil: botón grande «Montar / Despiezar», tocar la bomba hace lo mismo y arrastrar en horizontal la gira; en vertical las piezas se apilan de arriba abajo. Con prefers-reduced-motion sale montada y quieta, y sin WebGL se ve la lista de piezas.

// EL CÓDIGO

<header class="cabecera">
  <div class="marca">
    <svg viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="16" r="13" fill="none" stroke="#00FF7F" stroke-width="2.5"/><path d="M16 6c4 5 6 8 6 11a6 6 0 0 1-12 0c0-3 2-6 6-11z" fill="#00FF7F"/></svg>
    <div>ORZA<small>Bombas industriales</small></div>
  </div>
  <ul class="menu"><li>Bombas</li><li>Riego</li><li>Servicio técnico</li></ul>
  <a class="pedir" href="#ficha">Pedir precio</a>
</header>

<main>
  <section class="pista" id="pista" aria-label="La electrobomba CM-40, pieza a pieza">
    <div class="escena" id="escena">
      <canvas id="lienzo" role="img" aria-label="Electrobomba centrífuga CM-40 en 3D. Al bajar, sus diez piezas llegan volando, se colocan en fila con su nombre y se montan solas."></canvas>
      <svg id="lineas" aria-hidden="true"></svg>
      <ol class="rotulos" id="rotulos" aria-label="Piezas de la bomba"></ol>

      <div class="intro" id="intro">
        <span class="antetitulo"><i></i>Nueva serie CM · 4 kW</span>
        <h1>Mírala <em>por dentro</em> antes de comprarla.</h1>
        <p>Diez piezas, ningún secreto. Baja y mira cómo se monta.</p>
      </div>

      <div class="final" id="final">
        <span class="estado"><i></i>Montada · lista para instalar</span>
        <h2>Electrobomba <em>CM-40</em></h2>
        <ul class="chips">
          <li><strong>4 kW</strong>potencia</li>
          <li><strong>45 m³/h</strong>caudal</li>
          <li><strong>38 m</strong>altura</li>
          <li><strong>IE3</strong>eficiencia</li>
        </ul>
        <a class="pedir" href="#ficha">Pedir presupuesto</a>
      </div>

      <div class="baja" id="baja"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M12 4v15M6 13l6 6 6-6"/></svg>Baja y mira cómo se monta</div>

      <div class="mandos">
        <ol class="pasos" id="pasos" aria-hidden="true"><li>1 · Piezas</li><li>2 · Despiece</li><li>3 · Montada</li></ol>
        <button class="accion" id="accion" type="button">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h6M14 12h6M10 8l4 4-4 4"/></svg>
          <span id="accionTexto">Montar</span>
        </button>
      </div>
      <p class="solo-lector" id="aviso" aria-live="polite"></p>
    </div>
  </section>

  <section class="tecnica" id="ficha" aria-labelledby="tituloFicha">
    <h2 id="tituloFicha">Ficha técnica · <em>CM-40</em></h2>
    <ul class="tabla">
      <li>Potencia<strong>4 kW · 400 V trifásica</strong></li>
      <li>Caudal máximo<strong>45 m³/h</strong></li>
      <li>Altura máxima<strong>38 m</strong></li>
      <li>Velocidad<strong>2.900 rpm</strong></li>
      <li>Cuerpo<strong>Fundición GG-25</strong></li>
      <li>Rodete<strong>Bronce</strong></li>
      <li>Cierre<strong>Carburo de silicio</strong></li>
      <li>Motor<strong>IE3 · IP55</strong></li>
    </ul>
    <a class="pedir" href="#ficha">Pedir presupuesto</a>
    <p class="pie">Demostración de AE Lab: producto y marca de ejemplo.</p>
  </section>
</main>

Ver el vídeo ↗

← Carrusel en 3D con física real