Websites, die verkaufen.

/* Sechs Flächen, ein Raum: preserve-3d */
.buehne  { perspective: 700px; }

.wuerfel {
  transform-style: preserve-3d;
  animation: drehen 10s linear infinite;
}
.wuerfel:hover { animation-play-state: paused; }

.seite--vorn   { transform: translateZ(52px); }
.seite--hinten { transform: rotateY(180deg) translateZ(52px); }
.seite--rechts { transform: rotateY(90deg)  translateZ(52px); }
.seite--oben   { transform: rotateX(90deg)  translateZ(52px); }

@keyframes drehen {
  to { transform: rotateX(360deg) rotateY(720deg); }
}

/* 90 Partikel weichen dem Cursor aus */
function malen() {
  ctx.clearRect(0, 0, w, h);
  for (const p of punkte) {
    const dx = p.x - maus.x, dy = p.y - maus.y;
    const d  = Math.hypot(dx, dy) || 1;
    if (d < 80) { p.x += dx / d * 2.4; p.y += dy / d * 2.4; }
    p.x += (p.hx - p.x) * .05;   /* zurück zum Heimatpunkt */
    p.y += (p.hy - p.y) * .05;
    ctx.fillRect(p.x, p.y, 2, 2);
  }
  requestAnimationFrame(malen);
}

/* Zeichen rotieren zufällig — dann rasten sie einzeln ein */
const GLYPHEN = '!<>-_/[]{}=+*^?#';

function entschluesseln(el, wort) {
  let frame = 0;
  (function tick() {
    el.textContent = [...wort].map((zeichen, i) =>
      frame / 3 > i
        ? zeichen
        : GLYPHEN[Math.random() * GLYPHEN.length | 0]
    ).join('');
    if (frame++ < wort.length * 3 + 3) requestAnimationFrame(tick);
  })();
}

entschluesseln(ziel, 'HANDCODE.');

/* Schwerkraft, Aufprall, Reibung — pure Mathematik */
ball.vy += 0.5;                /* Gravitation zieht */
ball.x  += ball.vx;
ball.y  += ball.vy;

if (ball.y > boden) {          /* Aufprall */
  ball.y   = boden;
  ball.vy *= -0.78;            /* Energie verpufft */
  ball.vx *=  0.99;            /* Rollreibung */
}

/* Kollision: Impulse entlang der Verbindungslinie tauschen */
const d = Math.hypot(b.x - a.x, b.y - a.y);
if (d < a.r + b.r) tauscheImpulse(a, b);