Componentes de Scroll Sequences
Componentes de Scroll Sequences listos para copiar: demo en vivo y código fuente. Acceso lifetime en Ui Ux Library.
- Wireframe — Wireframe al scroll: el producto se desmaterializa de render a blueprint (malla), revelando su ingeniería por debajo. Recibe una carpeta de frames WebP que generas de tu propio producto (con la skill scroll-sequence o exportando de tu render 3D). Scrub suave (rAF + easing), responsive automático y modo multi-set (art-direction por dispositivo). Demo en vivo: /demos/scroll-sequence/#wireframe
- Turntable360 — Giro 360° al scroll: el producto rota sobre su eje como un turntable mientras bajas, para verlo desde todos los ángulos. Recibe una carpeta de frames WebP que generas de tu propio producto (con la skill scroll-sequence o exportando de tu render 3D). Scrub suave (rAF + easing), responsive automático y modo multi-set (art-direction por dispositivo). Demo en vivo: /demos/scroll-sequence/#orbit
- Teardown — Despiece ligado al scroll, estilo product-page de Apple: al bajar, el producto se abre y revela cada componente por dentro. Recibe una carpeta de frames WebP que generas de tu propio producto (con la skill scroll-sequence o exportando de tu render 3D). Scrub suave (rAF + easing), responsive automático y modo multi-set (art-direction por dispositivo). Demo en vivo: /demos/scroll-sequence/#teardown
- Levitate — Levitación al scroll: el producto queda suspendido y gira suave, sostenido por nada. Reveal premium para un hero. Recibe una carpeta de frames WebP que generas de tu propio producto (con la skill scroll-sequence o exportando de tu render 3D). Scrub suave (rAF + easing), responsive automático y modo multi-set (art-direction por dispositivo). Demo en vivo: /demos/scroll-sequence/#levitate
- LensZoom — Zoom macro al scroll: la cámara entra hasta el detalle (la lente, la textura) a medida que bajas. Foco en el material. Recibe una carpeta de frames WebP que generas de tu propio producto (con la skill scroll-sequence o exportando de tu render 3D). Scrub suave (rAF + easing), responsive automático y modo multi-set (art-direction por dispositivo). Demo en vivo: /demos/scroll-sequence/#zoom
- FreeFall — Caída libre al scroll: el producto flota y cae por el vacío mientras bajas, ingrávido, sobre un fondo oscuro sin suelo. Recibe una carpeta de frames WebP que generas de tu propio producto (con la skill scroll-sequence o exportando de tu render 3D). Scrub suave (rAF + easing), responsive automático y modo multi-set (art-direction por dispositivo). Demo en vivo: /demos/scroll-sequence/#freefall
- Drop — Caída al scroll: el producto cae y aterriza en cuadro con timing controlado por tu scroll — un hero con peso y gravedad. Recibe una carpeta de frames WebP que generas de tu propio producto (con la skill scroll-sequence o exportando de tu render 3D). Scrub suave (rAF + easing), responsive automático y modo multi-set (art-direction por dispositivo). Demo en vivo: /demos/scroll-sequence/#fall
- Cutaway — Corte transversal al scroll: una sección atraviesa el producto para ver su interior — el cutaway técnico, controlado por scroll. Recibe una carpeta de frames WebP que generas de tu propio producto (con la skill scroll-sequence o exportando de tu render 3D). Scrub suave (rAF + easing), responsive automático y modo multi-set (art-direction por dispositivo). Demo en vivo: /demos/scroll-sequence/#cutaway
- ColorShift — Cambio de color al scroll: el mismo cuerpo recorre todos sus acabados mientras bajas — ideal para un selector de variantes. Recibe una carpeta de frames WebP que generas de tu propio producto (con la skill scroll-sequence o exportando de tu render 3D). Scrub suave (rAF + easing), responsive automático y modo multi-set (art-direction por dispositivo). Demo en vivo: /demos/scroll-sequence/#color
- Assembly — Montaje al scroll: las piezas entran y se ensamblan una a una hasta formar el producto acabado. El despiece, en reversa. Recibe una carpeta de frames WebP que generas de tu propio producto (con la skill scroll-sequence o exportando de tu render 3D). Scrub suave (rAF + easing), responsive automático y modo multi-set (art-direction por dispositivo). Demo en vivo: /demos/scroll-sequence/#assemble