Effetto

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

29 July 2025

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Particles</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inconsolata:wght@300;400&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #030508;
    --accent1: #00f5d4;
    --accent2: #f72585;
    --accent3: #fee440;
    --text: #e8f4f8;
  }

body {
    background: var(--bg);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    font-family: 'Inconsolata', monospace;
    cursor: none;
  }

canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }

.ui {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 10;
  }

.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
  }

.title h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 12vw, 10rem);
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 245, 212, 0.3);
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;
    mix-blend-mode: screen;
    animation: fadeIn 2s ease forwards;
  }

.title p {
    font-size: clamp(0.65rem, 1.5vw, 0.85rem);
    color: rgba(232, 244, 248, 0.35);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-top: 1rem;
    animation: fadeIn 2.5s ease forwards;
  }

.corner {
    position: absolute;
    font-size: 0.65rem;
    color: rgba(0, 245, 212, 0.4);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .corner.tl { top: 2rem; left: 2rem; }
  .corner.br { bottom: 2rem; right: 2rem; text-align: right; }

.stats {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    font-size: 0.65rem;
    color: rgba(0, 245, 212, 0.35);
    letter-spacing: 0.15em;
    line-height: 2;
  }

.controls {
    position: absolute;
    top: 2rem;
    right: 2rem;
    display: flex;
    gap: 0.75rem;
    pointer-events: all;
  }

.btn {
    background: rgba(0, 245, 212, 0.05);
    border: 1px solid rgba(0, 245, 212, 0.2);
    color: rgba(0, 245, 212, 0.6);
    padding: 0.4rem 0.9rem;
    font-family: 'Inconsolata', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn:hover {
    background: rgba(0, 245, 212, 0.12);
    border-color: rgba(0, 245, 212, 0.6);
    color: var(--accent1);
  }
  .btn.active {
    background: rgba(0, 245, 212, 0.15);
    border-color: var(--accent1);
    color: var(--accent1);
  }

.cursor {
    position: fixed;
    width: 6px; height: 6px;
    background: var(--accent1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    transition: transform 0.1s;
  }
  .cursor-ring {
    position: fixed;
    width: 32px; height: 32px;
    border: 1px solid rgba(0, 245, 212, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: all 0.12s ease;
  }

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }
</style>
</head>
<body>

<div class="ui">
  <div class="corner tl">Particle System v1.0</div>
  <div class="corner br">Move mouse to interact</div>
  <div class="stats" id="stats"></div>
  <div class="controls">
    <button class="btn active" id="btnNormal">Normal</button>
    <button class="btn" id="btnExplode">Explode</button>
    <button class="btn" id="btnVortex">Vortex</button>
    <button class="btn" id="btnWeb">Web</button>
  </div>
  <div class="title">
    <h1>Particles</h1>
    <p>Interactive canvas experiment</p>
  </div>
</div>

let W = canvas.width = window.innerWidth;
let H = canvas.height = window.innerHeight;
let mouse = { x: W / 2, y: H / 2 };
let mode = 'normal';
let frame = 0;

// Colors
const colors = ['#00f5d4', '#f72585', '#fee440', '#4cc9f0', '#7209b7'];

// Particle count based on screen size
const COUNT = Math.min(180, Math.floor((W * H) / 6000));

class Particle {
  constructor() { this.reset(true); }

reset(init = false) {
    this.x = init ? Math.random() * W : Math.random() * W;
    this.y = init ? Math.random() * H : Math.random() * H;
    this.baseX = this.x;
    this.baseY = this.y;
    this.size = Math.random() * 2.5 + 0.5;
    this.color = colors[Math.floor(Math.random() * colors.length)];
    this.alpha = Math.random() * 0.7 + 0.2;
    this.speed = Math.random() * 0.8 + 0.2;
    this.angle = Math.random() * Math.PI * 2;
    this.vx = Math.cos(this.angle) * this.speed;
    this.vy = Math.sin(this.angle) * this.speed;
    this.life = 1;
    this.decay = Math.random() * 0.003 + 0.001;
    this.orbitRadius = Math.random() * 120 + 40;
    this.orbitAngle = Math.random() * Math.PI * 2;
    this.orbitSpeed = (Math.random() - 0.5) * 0.02;
    this.twinkle = Math.random() * Math.PI * 2;
  }

update() {
    this.twinkle += 0.05;
    const twinkleAlpha = this.alpha * (0.6 + 0.4 * Math.sin(this.twinkle));

const dx = mouse.x - this.x;
    const dy = mouse.y - this.y;
    const dist = Math.sqrt(dx * dx + dy * dy);
    const influence = 120;

if (mode === 'normal') {
      this.x += this.vx;
      this.y += this.vy;

// Gentle attract to mouse
      if (dist < influence) {
        const force = (influence - dist) / influence;
        this.x += (dx / dist) * force * 1.5;
        this.y += (dy / dist) * force * 1.5;
      }

// Wrap
      if (this.x < -5) this.x = W + 5;
      if (this.x > W + 5) this.x = -5;
      if (this.y < -5) this.y = H + 5;
      if (this.y > H + 5) this.y = -5;

} else if (mode === 'explode') {
      if (dist < 150) {
        const force = (150 - dist) / 150 * 6;
        this.x -= (dx / dist) * force;
        this.y -= (dy / dist) * force;
      }
      this.x += this.vx * 0.5;
      this.y += this.vy * 0.5;
      this.vx *= 0.98;
      this.vy *= 0.98;

if (this.x < 0 || this.x > W) this.vx *= -1;
      if (this.y < 0 || this.y > H) this.vy *= -1;
      this.x = Math.max(0, Math.min(W, this.x));
      this.y = Math.max(0, Math.min(H, this.y));

} else if (mode === 'vortex') {
      this.orbitAngle += this.orbitSpeed;
      const targetX = mouse.x + Math.cos(this.orbitAngle) * this.orbitRadius;
      const targetY = mouse.y + Math.sin(this.orbitAngle) * this.orbitRadius;
      this.x += (targetX - this.x) * 0.08;
      this.y += (targetY - this.y) * 0.08;

} else if (mode === 'web') {
      this.x += this.vx * 0.4;
      this.y += this.vy * 0.4;
      if (this.x < 0 || this.x > W) this.vx *= -1;
      if (this.y < 0 || this.y > H) this.vy *= -1;
      this.x = Math.max(0, Math.min(W, this.x));
      this.y = Math.max(0, Math.min(H, this.y));
    }

this._currentAlpha = twinkleAlpha;
  }

draw() {
    ctx.save();
    ctx.globalAlpha = this._currentAlpha;
    ctx.fillStyle = this.color;
    ctx.shadowBlur = 8;
    ctx.shadowColor = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
  }
}

// Init particles
const particles = Array.from({ length: COUNT }, () => new Particle());

// Add burst particles on click
function burst(x, y) {
  const burstCount = 30;
  for (let i = 0; i < burstCount; i++) {
    const p = new Particle();
    p.x = x; p.y = y;
    const angle = (i / burstCount) * Math.PI * 2;
    const speed = Math.random() * 5 + 2;
    p.vx = Math.cos(angle) * speed;
    p.vy = Math.sin(angle) * speed;
    p.size = Math.random() * 3 + 1;
    p.life = 1;
    p.isBurst = true;
    p.decay = 0.02;
    particles.push(p);
  }
}

function animate() {
  frame++;
  ctx.fillStyle = 'rgba(3, 5, 8, 0.18)';
  ctx.fillRect(0, 0, W, H);

// Remove dead burst particles
  for (let i = particles.length - 1; i >= 0; i--) {
    if (particles[i].isBurst) {
      particles[i].life -= particles[i].decay;
      particles[i]._currentAlpha = particles[i].life;
      if (particles[i].life <= 0) {
        particles.splice(i, 1);
        continue;
      }
    }
    particles[i].update();
  }

drawConnections();
  if (mode !== 'vortex') drawMouseConnections();

particles.forEach(p => p.draw());

// Stats
  if (frame % 30 === 0) {
    stats.textContent = `PARTICLES: ${particles.length}\nMODE: ${mode.toUpperCase()}\nFPS: ~60`;
  }

requestAnimationFrame(animate);
}

// Events
document.addEventListener('mousemove', e => {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
  cursor.style.left = e.clientX + 'px';
  cursor.style.top = e.clientY + 'px';
  cursorRing.style.left = e.clientX + 'px';
  cursorRing.style.top = e.clientY + 'px';
});

document.addEventListener('click', e => {
  if (e.target.classList.contains('btn')) return;
  burst(e.clientX, e.clientY);
});

document.addEventListener('touchmove', e => {
  e.preventDefault();
  mouse.x = e.touches[0].clientX;
  mouse.y = e.touches[0].clientY;
}, { passive: false });

document.addEventListener('touchstart', e => {
  burst(e.touches[0].clientX, e.touches[0].clientY);
});

window.addEventListener('resize', () => {
  W = canvas.width = window.innerWidth;
  H = canvas.height = window.innerHeight;
});

// Mode buttons
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    mode = btn.id.replace('btn', '').toLowerCase();
  });
});

animate();
</script>
</body>
</html>

Effetto

Consigliato

Scorri per esistere

Un codice di Metehan

Interfaccia utente 3D Ripple

HTML

CSS

JS

Consigliato

Scorri per esistere

Un codice di Metehan

Interfaccia utente 3D Ripple

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS