JS + CSS Playground

6 interactive demos that showcase what JavaScript and CSS can do together (animations, effects, canvas, sliders, web audio, CSS-only tricks...)

1. Progress Bar

2. Animated Canvas

3. CSS Glow & Blur

4. Live Clock

5. Neon Text

6. CSS Slider

📈 Progress Bar (CSS + JS)

JS Code

<div class="progress">
<div class="bar" id="bar"></div>
</div>

document.getElementById('bar').style.width = '85%';

🎨 Animated Canvas (CSS + JS)

JS Code

const canvas = document.getElementById('demo2-canvas');
const ctx = canvas.getContext('2d');
let angle = 0;
function animate() {
  ctx.clearRect(0,0,420,260);
  ctx.save();
  ctx.translate(210,130);
  ctx.rotate(angle);
  ctx.fillStyle = '#6366f1';
  ctx.fillRect(-80,-80,160,160);
  ctx.restore();
  angle += 0.05;
  requestAnimationFrame(animate);
}

✨ CSS Glow & Blur

Hover me for glow + blur!

Text with CSS box-shadow glow effect

CSS Code

.content:hover {
  text-shadow: 0 0 40px #6366f1,
       0 0 80px #a5b4fc;
  filter: blur(1px);
}

🕒 Live Clock (CSS + JS)

00:00:00

JS Code

function updateClock() {
  const now = new Date();
  let time = now.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit', second:'2-digit'});
  document.getElementById('demo4-clock').textContent = time;
  setTimeout(updateClock, 1000);
}

🌟 Neon Text (CSS only)

NEON

CSS Code

@keyframes neonFlicker {
  from { text-shadow: ... }
  to { text-shadow: ... }
}

.text {
  animation: neonFlicker 1.5s infinite alternate;
  text-shadow: -4px -4px 0 #6366f1;
}

🎛️ CSS Slider (No JS needed)

42%

CSS Code

input[type="range"] {
  -webkit-appearance: none;
  height: 12px;
  background: #334155;
  border-radius: 9999px;
  &:hover { opacity: 1; }
  &::-webkit-slider-thumb {
    height: 32px;
    width: 32px;
    background: #6366f1;
    cursor: pointer;
    box-shadow: 0 0 0 6px rgba(99,102,241,0.3);
    border-radius: 50%;
  }
}