Digital DNA erklärt: So funktioniert die Technologie

Unter der Haube der Living Website arbeitet ein komplexes System von Sensoren, Algorithmen und Echtzeit-Anpassungen. In diesem technischen Deep-Dive erkläre ich, wie die Digital DNA Technologie funktioniert.

Die Architektur im Überblick

Das DNA-System besteht aus drei Hauptkomponenten:

1. Sensoren: JavaScript Event-Listener, die Benutzerinteraktionen erfassen
2. Engine: Der Algorithmus, der DNA-Werte berechnet
3. Renderer: Das System, das UI-Anpassungen durchführt

Alles läuft clientseitig — keine Server-Kommunikation für das Tracking. Das bedeutet: maximale Performance und vollständiger Datenschutz.

Die vier DNA-Metriken im Detail

Der Tracking-Code

So sieht der vereinfachte Sensor-Code aus:

// Mouse Position Tracking
document.addEventListener('mousemove', e => {
    DNA.mouseData.push({
        x: e.clientX,
        y: e.clientY,
        t: Date.now()
    });
    DNA.lastActive = Date.now();
});

// Scroll Tracking
window.addEventListener('scroll', () => {
    DNA.scrollData.push(window.scrollY);
    DNA.lastActive = Date.now();
}, { passive: true });

// Click Tracking
document.addEventListener('click', () => {
    DNA.clicks++;
    DNA.lastActive = Date.now();
});

Die Berechnung

Alle 200ms berechnet die Engine die DNA-Werte neu:

const calculate = () => {
    // Energie aus Mausgeschwindigkeit
    let speed = 0;
    for (let i = 1; i < mouseData.length; i++) {
        const dx = mouseData[i].x - mouseData[i-1].x;
        const dy = mouseData[i].y - mouseData[i-1].y;
        const dt = mouseData[i].t - mouseData[i-1].t;
        speed += Math.sqrt(dx*dx + dy*dy) / dt * 12;
    }
    DNA.energy = clamp(speed / mouseData.length, 5, 100);
    
    // Fokus invers zur Energie
    DNA.focus = clamp(105 - DNA.energy, 5, 100);
    
    // Rhythmus aus Scroll-Daten
    DNA.rhythm = calculateRhythm(scrollData);
    
    // Interesse aus Klicks + Aktivität
    const idle = (Date.now() - lastActive) / 1000;
    DNA.interest = clamp(clicks * 6 + (50 - idle), 5, 100);
};

Persistenz mit LocalStorage

Die DNA wird lokal gespeichert, sodass wiederkehrende Besucher erkannt werden:

// Speichern beim Verlassen
window.addEventListener('beforeunload', () => {
    localStorage.setItem('pixella_dna', 
        JSON.stringify(DNA)
    );
});

// Laden beim Start
const saved = localStorage.getItem('pixella_dna');
if (saved) DNA = JSON.parse(saved);

UI-Anpassungen in Echtzeit

Die DNA-Werte steuern verschiedene UI-Eigenschaften:

• Animationsgeschwindigkeit: Hohe Energie = schnellere Animationen
• Partikel-Bewegung: DNA steuert Canvas-Effekte
• Farbintensität: Engagement beeinflusst Farbsättigung
• Content-Dichte: Fokus beeinflusst Informationsmenge

Performance-Optimierungen

Um die Website performant zu halten, nutzen wir mehrere Techniken:

• Array-Limits: Maximal 40 Mauspositions, 25 Scroll-Events
• Throttling: Berechnung alle 200ms, nicht bei jedem Event
• RequestAnimationFrame: Für Canvas-Animationen
• CSS Custom Properties: Effiziente Style-Updates