Cinematic Textanimation

Dieses Dreamcodes Script erzeugt einen großen Schriftzug mitten auf der Webseite, der aussieht wie ein Kinofilm Titel. Um den Text herum glimmen kleine Lichtpunkte wie Funken, der Schriftzug selbst strahlt warmes Licht aus und hat einen leichten Schweifeffekt, der Bewegung suggeriert. Wenn man die Maus bewegt, verschiebt sich alles minimal, so als würde man die Szene mit einer Kamera leicht kippen. Alles zusammen erzeugt den Eindruck von Tiefe, Licht und realer Filmatmosphäre. Der Leser soll den Eindruck vermittelt bekommen, als stünde der Titel wirklich im Raum, nicht nur auf der Webseite.

(() => {
    const canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    const ctx = canvas.getContext('2d');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.style.position = 'fixed';
    canvas.style.top = 0;
    canvas.style.left = 0;
    canvas.style.pointerEvents = 'none';
    canvas.style.zIndex = 9999;

    let W = canvas.width;
    let H = canvas.height;
    let mouseX = 0, mouseY = 0;
    const text = "Dreamcodes";

    const particles = [];
    const PARTICLE_COUNT = 150;

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

    window.addEventListener('mousemove', e => {
        mouseX = e.clientX;
        mouseY = e.clientY;
    });

    class Particle {
        constructor() {
            this.reset();
        }
        reset() {
            this.x = W/2 + (Math.random()-0.5)*400;
            this.y = H/2 + (Math.random()-0.5)*50;
            this.vx = (Math.random()-0.5)*0.4;
            this.vy = -Math.random()*0.5-0.1;
            this.alpha = Math.random()*0.7+0.3;
            this.size = Math.random()*3+1;
            this.life = Math.random()*80+60;
        }
        update() {
            this.x += this.vx;
            this.y += this.vy;
            this.life--;
            if (this.life <= 0) this.reset();
        }
        draw(px, py) {
            ctx.beginPath();
            ctx.arc(this.x + px*15, this.y + py*10, this.size,0,Math.PI*2);
            ctx.fillStyle = `rgba(255,255,255,${this.alpha})`;
            ctx.fill();
        }
    }

    for(let i=0;i<PARTICLE_COUNT;i++) particles.push(new Particle());

    function drawText(px, py) {
        const fontSize = Math.min(W,H)/6;
        ctx.font = `${fontSize}px "Cinzel", serif`;
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";

        // Motion Blur Glow
        ctx.shadowColor = "rgba(255,220,180,0.8)";
        ctx.shadowBlur = 35;
        ctx.fillStyle = "#FFDDBB";
        ctx.fillText(text, W/2 + px*20, H/2 + py*15);

        // Subtiler 2. Glow
        ctx.shadowColor = "rgba(255,150,80,0.4)";
        ctx.shadowBlur = 15;
        ctx.fillText(text, W/2 + px*20, H/2 + py*15);
        ctx.shadowBlur = 0;
    }

    function animate() {
        ctx.clearRect(0,0,W,H);
        const px = (mouseX/W-0.5)*2;
        const py = (mouseY/H-0.5)*2;

        // Partikel hinter Text
        particles.forEach(p=>{
            p.update();
            p.draw(px,py);
        });

        // Text
        drawText(px,py);

        requestAnimationFrame(animate);
    }

    animate();
})();