CSS टेक्स्ट ग्लिच जनरेटर - ग्लिच टेक्स्ट इफ़ेक्ट बनाएं ऑनलाइन

// Generate CSS glitch effect - Color Split technique
function generateColorSplitGlitch(config) {
  const { text, fontSize, textColor, bgColor, color1, color2, duration } = config;

  const html = `<div class="glitch-wrapper">
  <div class="glitch" data-text="${text}">${text}</div>
</div>`;

  const css = `.glitch-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background: ${bgColor};
  padding: 2rem;
}

.glitch {
  position: relative;
  font-size: ${fontSize}px;
  font-weight: 700;
  color: ${textColor};
  letter-spacing: 0.05em;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  color: ${color1};
  animation: glitch-before ${duration}s infinite linear alternate-reverse;
  clip-path: inset(0 0 0 0);
}

.glitch::after {
  color: ${color2};
  animation: glitch-after ${duration}s infinite linear alternate-reverse;
  clip-path: inset(0 0 0 0);
}

@keyframes glitch-before {
  0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, -1px); }
  20% { clip-path: inset(92% 0 1% 0); transform: translate(1px, 2px); }
  40% { clip-path: inset(43% 0 1% 0); transform: translate(-1px, 3px); }
  60% { clip-path: inset(25% 0 58% 0); transform: translate(3px, 1px); }
  80% { clip-path: inset(54% 0 7% 0); transform: translate(-3px, -2px); }
  100% { clip-path: inset(58% 0 43% 0); transform: translate(2px, -3px); }
}

@keyframes glitch-after {
  0% { clip-path: inset(65% 0 13% 0); transform: translate(2px, 1px); }
  20% { clip-path: inset(79% 0 2% 0); transform: translate(-2px, -1px); }
  40% { clip-path: inset(48% 0 38% 0); transform: translate(1px, -2px); }
  60% { clip-path: inset(3% 0 83% 0); transform: translate(-1px, 3px); }
  80% { clip-path: inset(22% 0 64% 0); transform: translate(3px, 2px); }
  100% { clip-path: inset(10% 0 74% 0); transform: translate(-2px, 1px); }
}`;

  return { html, css };
}

// Generate noise/clip-path keyframes with controllable intensity
function generateNoiseKeyframes(name, intensity, steps = 20) {
  let keyframes = `@keyframes ${name} {\n`;
  for (let i = 0; i <= steps; i++) {
    const percent = Math.round((i / steps) * 100);
    const maxClip = intensity * 10;
    const top = Math.floor(Math.random() * maxClip);
    const bottom = Math.floor(Math.random() * maxClip);
    keyframes += `  ${percent}% { clip-path: inset(${top}% 0 ${bottom}% 0); }\n`;
  }
  keyframes += '}';
  return keyframes;
}

// Usage
const result = generateColorSplitGlitch({
  text: 'GLITCH',
  fontSize: 80,
  textColor: '#ffffff',
  bgColor: '#0a0a0a',
  color1: '#00ffff',
  color2: '#ff00ff',
  duration: 2,
});
console.log(result.html);
console.log(result.css);