CSS-Zone
Four tiles scaling in sequence. Ejemplo practico para loaders e indicadores de estado con vista previa en vivo, estructura HTML y CSS listo para produccion que puedes integrar rapidamente.
Vista previa
HTML + CSS
<div class="cube-pulse"> <span></span><span></span><span></span><span></span> </div> <style> .cube-pulse { display: grid; grid-template-columns: repeat(2, 22px); grid-template-rows: repeat(2, 22px); gap: 8px; width: max-content; } .cube-pulse span { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #5b8def, #9a6bff); box-shadow: 0 10px 30px rgba(91, 141, 239, 0.28); animation: cube-pulse 1.2s ease-in-out infinite; } .cube-pulse span:nth-child(2){animation-delay:.1s;} .cube-pulse span:nth-child(3){animation-delay:.2s;} .cube-pulse span:nth-child(4){animation-delay:.3s;} @keyframes cube-pulse {0%,100%{transform:scale(.9);opacity:.85;}50%{transform:scale(1.15);opacity:1;}} </style>
Pulse cubes es un patron reutilizable de animacion CSS que puede integrarse en interfaces modernas sin dependencias externas. El ejemplo incluye estructura HTML y estilos de movimiento faciles de escalar para componentes de produccion.
Usa este efecto para indicar estado, reforzar el foco visual o anadir microinteracciones ligeras que apoyen la claridad del contenido. El movimiento debe reforzar la jerarquia, asi que manten velocidad, contraste y densidad alineados con los objetivos de tu interfaz.
Copia el snippet, adapta espaciado y tiempos a los tokens de tu sistema y prueba el comportamiento en moviles y dispositivos de bajo consumo. Anade soporte para reduced-motion para mantener el componente accesible sin perder su funcion.