Loader Teks Glitch

SYSTEM_BOOT

INITIALIZING PROTOCOLS…

Animasi pemuatan berbasis teks dengan efek glitch ala cyberpunk (efek noise). Ini ideal jika Anda ingin menciptakan rasa urgensi atau suasana futuristik seolah-olah sistem sedang dijalankan.

Kasus & Fitur Penggunaan

Layar pemuatan awal Situs web fiksi ilmiah/gaya cyberpunk.
Peralihan adegan dan transisi untuk situs game dan portofolio.
Manfaatkan sepenuhnya CSS dan clip-path transform untuk mencapai animasi glitch berkecepatan tinggi tanpa menggunakan JavaScript yang rumit.

Poin-poin penting dari desain dan UX (Desain & UX)

Penyimpangan Kromatik: Dengan sedikit menggeser bayangan cyan (#00fff9) dan magenta (#ff00c1), kami menciptakan kembali efek visual monitor CRT lama atau layar rusak.
Scanline: Gradasi garis horizontal tipis dilapiskan pada seluruh latar belakang untuk memberikan nuansa monitor analog.
Imitasi gerakan acak: Membuat bingkai utama yang mengubah clip-path dan transform secara acak untuk mensimulasikan keacakan bug sebenarnya.

Cara menyesuaikan (Panduan Kustomisasi)

Ubah teks: Mengubah atribut data-text di HTML dan teks di dalam tag (misalnya data-text="LOADING...").
Ubah skema warna: Anda dapat membuat berbagai jenis gangguan dengan mengubah kode warna cyan dan magenta (#00fff9, #ff00c1) agar sesuai dengan warna tema proyek Anda.
Penyesuaian kecepatan: Anda dapat menyesuaikan intensitas kesalahan dengan mengubah jumlah detik (misalnya 2s, 3s) yang disetel dalam animation di CSS.

Kode implementasi (Implementasi)

<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>

Dukungan Peramban

Bekerja dengan browser modern (Chrome, Firefox, Safari, Edge).
Karena properti clip-path: inset(...) digunakan, pemotongan pada persegi panjang mungkin tidak dilakukan secara akurat di beberapa browser lama, namun animasinya tidak akan rusak.