Loader de Texto Glitch

SYSTEM_BOOT

INITIALIZING PROTOCOLS…

Una animación de carga basada en texto con un efecto de falla (efecto de ruido) estilo cyberpunk. Esto es ideal si desea crear una sensación de urgencia o una atmósfera futurista como si el sistema se estuviera iniciando.

Casos de uso y características

Pantalla de carga inicial del sitio web estilo ciencia ficción/cyberpunk.
Cambio de escena y transiciones para juegos y sitios de cartera.
Haga pleno uso de clip-path y transform de CSS para lograr animaciones de fallas de alta velocidad sin usar JavaScript complicado.

Puntos claves del diseño y UX (Design & UX)

Aberración cromática: Al desplazar ligeramente las sombras cian (#00fff9) y magenta (#ff00c1), recreamos el efecto visual de un monitor CRT antiguo o una pantalla dañada.
Línea de exploración: una gradación de finas líneas horizontales se superpone a todo el fondo para darle la sensación de un monitor analógico.
Imitación de movimiento aleatorio: cree fotogramas clave que cambien aleatoriamente la “ruta del clip” y la “transformación” para simular la aleatoriedad de un error real.

Cómo personalizar (Guía de personalización)

Cambiar texto: cambia tanto el atributo data-text en el HTML como el texto dentro de la etiqueta (por ejemplo, data-text="LOADING...").
Cambiar combinación de colores: puede crear diferentes gustos de fallos cambiando los códigos de color cian y magenta (#00fff9, #ff00c1) para que coincidan con el color del tema de su proyecto.
Ajuste de velocidad: Puedes ajustar la intensidad del fallo cambiando el número de segundos (por ejemplo, 2s, 3s) establecidos en animación en CSS.

Código de implementación (Implementación)

<div class="glitch-loader-container flex flex-col items-center justify-center min-h-[400px] w-full bg-[#050510] rounded-xl overflow-hidden relative border border-slate-800">

<!-- Scanline Overlay -->

<div class="scanlines"></div>



<div class="glitch-wrapper mb-8 relative z-20">

  <div class="glitch-text text-4xl sm:text-6xl" data-text="SYSTEM_BOOT">SYSTEM_BOOT</div>

</div>



<div class="progress-bar-container w-48 sm:w-64 h-2 bg-slate-900 border border-slate-700 relative z-20 overflow-hidden">

  <div class="progress-bar-fill h-full bg-[#00fff9] relative"></div>

</div>



<div class="mt-4 text-[#ff00c1] text-xs font-mono tracking-widest z-20 blink-text">

  INITIALIZING PROTOCOLS...

</div>

</div>



<style>
.scanlines {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(

    to bottom,

    rgba(255,255,255,0),

    rgba(255,255,255,0) 50%,

    rgba(0,0,0,0.2) 50%,

    rgba(0,0,0,0.2)

  );

  background-size: 100% 4px;

  z-index: 10;

  pointer-events: none;

}



.glitch-text {

  font-family: 'Courier New', Courier, monospace;

  font-weight: 800;

  color: #fff;

  position: relative;

  letter-spacing: 0.1em;

  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);

  animation: glitch-skew 2s infinite linear alternate-reverse;

}



.glitch-text::before,

.glitch-text::after {

  content: attr(data-text);

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #050510;

  z-index: -1;

}



.glitch-text::before {

  left: 2px;

  text-shadow: -2px 0 #ff00c1;

  animation: glitch-anim-1 2s infinite linear alternate-reverse;

}



.glitch-text::after {

  left: -2px;

  text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;

  animation: glitch-anim-2 3s infinite linear alternate-reverse;

}



@keyframes glitch-skew {

  0% { transform: skew(0deg); }

  2% { transform: skew(-10deg); }

  4% { transform: skew(10deg); }

  6% { transform: skew(0deg); }

  90% { transform: skew(0deg); }

  92% { transform: skew(5deg); }

  94% { transform: skew(-5deg); }

  96% { transform: skew(0deg); }

}



@keyframes glitch-anim-1 {

  0% { clip-path: inset(20% 0 80% 0); transform: translate(-2px, 1px); }

  10% { clip-path: inset(50% 0 10% 0); transform: translate(2px, -1px); }

  20% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, 2px); }

  30% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -2px); }

  40% { clip-path: inset(30% 0 20% 0); transform: translate(-2px, 1px); }

  50% { clip-path: inset(90% 0 5% 0); transform: translate(2px, -1px); }

  60% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 2px); }

  70% { clip-path: inset(70% 0 20% 0); transform: translate(2px, -2px); }

  80% { clip-path: inset(5% 0 80% 0); transform: translate(-2px, 1px); }

  90% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px); }

  100% { clip-path: inset(20% 0 50% 0); transform: translate(-2px, 2px); }

}



@keyframes glitch-anim-2 {

  0% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -1px); }

  10% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, 2px); }

  20% { clip-path: inset(30% 0 40% 0); transform: translate(2px, -2px); }

  30% { clip-path: inset(5% 0 90% 0); transform: translate(-2px, 1px); }

  40% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px); }

  50% { clip-path: inset(20% 0 30% 0); transform: translate(-2px, 2px); }

  60% { clip-path: inset(90% 0 5% 0); transform: translate(2px, -2px); }

  70% { clip-path: inset(40% 0 50% 0); transform: translate(-2px, 1px); }

  80% { clip-path: inset(70% 0 20% 0); transform: translate(2px, -1px); }

  90% { clip-path: inset(15% 0 65% 0); transform: translate(-2px, 2px); }

  100% { clip-path: inset(50% 0 10% 0); transform: translate(2px, -2px); }

}



.progress-bar-fill {

  box-shadow: 0 0 10px #00fff9, 0 0 20px #00fff9;

  animation: progress-anim 4s infinite, progress-glitch 2s infinite;

}



@keyframes progress-anim {

  0% { width: 0%; }

  30% { width: 45%; }

  50% { width: 45%; }

  70% { width: 85%; }

  90% { width: 100%; }

  100% { width: 100%; }

}



@keyframes progress-glitch {

  0%, 100% { transform: translateX(0); opacity: 1; }

  10% { transform: translateX(-2px); opacity: 0.8; }

  15% { transform: translateX(2px); opacity: 1; }

  20% { transform: translateX(0); opacity: 0.9; }

}



.blink-text {

  animation: blink 1s step-end infinite;

}



@keyframes blink {

  0%, 100% { opacity: 1; }

  50% { opacity: 0; }

}
</style>

Soporte del navegador

Funciona con navegadores modernos (Chrome, Firefox, Safari, Edge).
Dado que se utiliza la propiedad clip-path: inset(...), es posible que el recorte en el rectángulo no se realice con precisión en algunos navegadores más antiguos, pero la animación no se interrumpirá.