Implement animated pixel mosaic with organic breathing effect and touch interaction

[Copilot]

Creates an artistic website featuring animated pixel mosaics with organic color transitions and touch/mouse interactivity for mobile and desktop.

Implementation

• Canvas-based pixel grid: Dynamically sized cells (12-25px) adapting to viewport dimensions
• Organic breathing animation: Each pixel independently oscillates between two HSL colors using phase-shifted sine waves (0.005-0.015 speed variance)
• Touch interaction: Multi-touch and mouse support with 3-pixel radial ripple effect on contact
• Responsive behavior: Debounced resize handler (250ms) regenerates grid with recalculated dimensions

Technical Details

Single-file HTML5 implementation, no dependencies. Uses requestAnimationFrame for 60fps rendering.

class LebendigeZelle {
    entwickeln(zeitstempel, interaktionsMap) {
        this.atemPhase += this.atemGeschwindigkeit;
        const atemFaktor = Math.sin(this.atemPhase) * 0.5 + 0.5;
        const aktuellerFarbton = this.farbwert1 + (this.farbwert2 - this.farbwert1) * atemFaktor;
        // Interaction pulse with exponential decay
        this.pulsIntensitaet += (this.zielIntensitaet - this.pulsIntensitaet) * 0.1;
        return `hsl(${aktuellerFarbton}, ${saettigung}%, ${helligkeit}%)`;
    }
}

Screenshots

Desktop - Breathing animation

Interaction ripple effect

Mobile responsive (375×667)

Original prompt

Initiales Konzept: Erstellung einer künstlerischen Website basierend auf einem Referenzbild. Das Motiv sollte aus animierten Pixeln bestehen, die sanft ihre Farbe ändern, um einen lebendigen, modernen Mosaik-Stil zu erzeugen.

Organische Evolution & Mobilität: Optimierung der Animation, damit sie einem „atmenden Organismus“ gleicht. Zudem Einführung der Touchscreen-Sensibilität für die Nutzung auf mobilen Geräten wie dem iPhone.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.