JSFiddle - React, Tailwind, and code Playground

by Colin Soderstrom

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Electric Border Animation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="electric-container">
    <div class="electric-box">
      Electric Shock Box
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: #0d0d0d;
  color: white;
  font-family: Arial, sans-serif;
}

.electric-container {
  position: relative;
  width: 300px;
  height: 150px;
}

.electric-box {
  position: relative;
  width: 100%;
  height: 100%;
  background: #1e1e2e;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.electric-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.spark {
  position: absolute;
  width: 8px;
  height: 8px;
  background: cyan;
  border-radius: 50%;
  filter: blur(2px);
  animation: flicker 0.15s infinite;
}

@keyframes flicker {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.3);
  }
}

JavaScript

const container = document.querySelector('.electric-container');

function createSpark() {
  const spark = document.createElement('div');
  spark.classList.add('spark');

  // Randomize position
  const size = Math.random() * 6 + 3; // 3px to 9px
  const x = Math.random() * 100; // Percentage
  const y = Math.random() * 100; // Percentage
  const duration = Math.random() * 0.5 + 0.3; // 0.3s to 0.8s

  // Apply styles
  spark.style.width = `${size}px`;
  spark.style.height = `${size}px`;
  spark.style.top = `${y}%`;
  spark.style.left = `${x}%`;
  spark.style.animationDuration = `${duration}s`;

  // Append to container
  container.appendChild(spark);

  // Remove spark after animation
  setTimeout(() => {
    spark.remove();
  }, duration * 1000);
}

// Generate sparks at intervals
setInterval(createSpark, 100);