@manufosela/scene-protonimg

Proton-based particle animation that morphs between two images, built with Lit 3

Particles morph between both images every 5 seconds.

Demo code (CodePen-ready HTML, CSS, JS)

HTML (html)

<div class="container">
    

    <div class="demo-card">
      <scene-protonimg
        width="900"
        height="300"
        time="5"
        background="#000"
        imagen1="img/scene-protonimg-demo1.png"
        imagen2="img/scene-protonimg-demo2.png"
      ></scene-protonimg>
    </div>
    <p class="hint">Particles morph between both images every 5 seconds.</p>
  </div>

CSS (css)

:root {
  --bg: #0c0f14;
  --bg-elevated: #141923;
  --bg-panel: #171d28;
  --border: #262f3f;
  --text: #f4f6fb;
  --text-muted: #a7b0c2;
  --text-dim: #7d879b;
  --accent: #ff8a3d;
  --accent-strong: #ff6a00;
  --accent-soft: rgba(255, 138, 61, 0.16);
  --shadow: 0 20px 50px rgba(5, 8, 14, 0.45);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --max-width: 1160px;
}

.container { max-width: 1100px; margin: 0 auto; }
    header { margin-bottom: 3rem; }
    h1 {
      font-family: "Manrope", system-ui, sans-serif;
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .subtitle { color: #b9cbc2; margin: 0.5rem 0 0.75rem; }
    .back-link { font-size: 0.85rem; color: #b9cbc2; text-decoration: none; }
    .back-link:hover { color: #00e0b3; }
    .demo-card {
      background: #1c1b1b;
      border-radius: 1rem;
      padding: 2rem;
      margin-bottom: 2rem;
      display: flex;
      justify-content: center;
    }
    .hint {
      color: #b9cbc2;
      font-size: 0.85rem;
      text-align: center;
      margin-top: 1rem;
    }