assets/js/glitch.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/**
 * glitch.js
 * Random glitch effect on .hero-name every 4-11 seconds
 */

export function initGlitch() {
  'use strict';

  const heroName = document.querySelector('.hero-name');
  if (!heroName) return;

  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

  function triggerGlitch() {
    heroName.classList.add('is-glitching');
    setTimeout(() => {
      heroName.classList.remove('is-glitching');
    }, 450);
  }

  function scheduleNextGlitch() {
    const delay = Math.random() * 7000 + 4000; // 4-11 seconds
    setTimeout(() => {
      triggerGlitch();
      scheduleNextGlitch();
    }, delay);
  }

  scheduleNextGlitch();
}