JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<input type="text" id="input-field" placeholder="Gib etwas ein...">
<div id="glitch-container"></div>

CSS

#glitch-container {
  position: relative;
  font-size: 24px;
  font-family: monospace;
}

#glitch-container span {
font-family: "Caveat Brush";
  font-size: 1.2rem;
  transition: transform 0.5s ease-in-out;
}

JavaScript

const inputField = document.getElementById('input-field');
const glitchContainer = document.getElementById('glitch-container');

inputField.addEventListener('blur', () => {
  glitchContainer.innerHTML = '';
  const inputValue = inputField.value;
  const spans = [];

  for (let i = 0; i < inputValue.length; i++) {
    const span = document.createElement('span');
    span.textContent = inputValue[i];
    span.style.position = 'absolute';
    span.style.left = `${i * 9}px`; // Anpassen der Position

    // Zufällige Transformationen anwenden
    span.style.transform = `translateY(${Math.random() * 3 - 2}px) scale(${Math.random() * 0.5 + 0.5}) rotate(${Math.random() * 3 - 2}deg)`;
    if (Math.random() > 0.5) {
      span.style.transform += ' scaleX(-1)'; // Spiegelung
    }

    spans.push(span);
    glitchContainer.appendChild(span);
  }

  /* / Alte Spans entfernen
  setTimeout(() => {
    glitchContainer.innerHTML = '';
  }, 2000); // Nach 2 Sekunden entfernen
  */
  
});