Tus animaciones reales, vectorizadas frame a frame y reproducidas como SVG puro: fondo transparente, nítidas a cualquier tamaño y compatibles con todos los navegadores — sin vídeo con canal alpha. A 25 fps con interpolación y un balanceo tipo brisa. Responsive, para superponer sobre un fondo a pantalla completa (p. ej. vídeo 4K).
Comparativa: el mismo clip como vídeo con alpha pesaría varios MB y exigiría dos formatos (HEVC para Safari + WebM para el resto). Estos SVG son texto plano, nítidos a cualquier tamaño y recoloreables al vuelo. La barra marca en verde cuándo aparece la bolsa: los huecos son parte de tu animación original (la bolsa hace dos pasadas, por eso el hueco central). Recortado por bolsa (7–9 s): sin cola vacía y con la entrada y salida ajustadas. Reproducción a 25 fps con fundido entre fotogramas y un vaivén lento tipo brisa; responsive y pensada para un fondo 4K a pantalla completa.
<!-- Hero a pantalla completa: fondo 4K + la bolsa superpuesta --> <div class="loop-hero"> <video class="loop-bg" autoplay muted loop playsinline> <source src="fondo-4k.mp4" type="video/mp4"> </video> <!-- color = tinta de la bolsa (blanca en la web de LOOP) --> <div class="loop-bag" data-src="loop-bag-1.json" data-fps="16" data-fit="width" style="color:#fff"></div> </div> <style> .loop-hero{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden} .loop-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .loop-hero .loop-bag{position:absolute;inset:0} </style> <script src="loop-bag.js"></script> /* data-fps: 16 = brisa lenta (0,64x) · 25 = velocidad original data-fit: cover (encaja como el fondo) o contain data-wind: on/off (balanceo brisa) · cambia data-src para elegir bolsa */