Eine Flamme braucht drei Sinuswellen: Carmen Ansio animiert ein Streichholz in Canvas

Ein Klick, und auf der Website von Carmen Ansio flammt ein Streichholz auf, mit Funkenflug, Flackern und Ausglühen. Ansio arbeitet bei Stripe am hauseigenen Designsystem und braucht für das Flackern nur drei Sinuswellen und rund 20 Zeilen Canvas-Code. Ihre Anleitung zeigt nebenbei einen Fehler, der viele Webanimationen betrifft: Auf einem Bildschirm mit 120 Hertz brennt das Streichholz doppelt so schnell ab.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Ansio veröffentlichte den Text am 4. Oktober 2026 unter dem Titel „A flame needs three sine waves“.^[1]

Das Wichtigste in Kürze

• Drei Sinuswellen mit den Faktoren 1,7, 3,3 und 7,1 erzeugen ein unregelmäßiges Flackern.
• Drei Tropfenformen mit abnehmender Auslenkung lassen die Flamme um den Streichholzkopf pendeln.
• Pro Frame gerechnete Werte verdoppeln auf 120-Hertz-Bildschirmen das Tempo.
• Für die Einstellung „Bewegung reduzieren“ hält Ansio eine ruhige Variante bereit.

Warum reicht eine Sinuswelle nicht für eine Flamme?

Eine einzelne Sinuswelle schwingt streng gleichmäßig, die Flamme pendelt dann wie ein Metronom alle 0,62 Sekunden hin und her. Ansio addiert deshalb drei Wellen mit ungeraden Geschwindigkeiten, jede halb so stark wie die vorige.^[1]

Das Pendeln wiederholt sich nach 10,5 Sekunden, zusammen mit der eigenen Kurve für die Flammenhöhe erst nach rund 21 Sekunden. Jede der drei Flammenschichten ist eine Tropfenform aus vier quadratischen Bézierkurven, von denen nur die Spitze wandert. Die äußere Schicht schwingt voll aus, die mittlere zu 80 %, der Kern zu 60 %.

Den Klassiker für natürliche Unregelmäßigkeit lässt Ansio bewusst liegen: Perlin-Noise. Ken Perlin erhielt für das Verfahren 1997 einen Technical Achievement Award der US-Filmakademie und erzeugte damit das Bild einer Fackel, deren Flamme vollständig aus berechneten Texturen besteht.^[5] Bei der kleinen Flamme sieht Ansio keinen Unterschied und behält ihre lesbare Codezeile.

Warum brennt das Streichholz auf schnellen Bildschirmen schneller ab?

Ansios ursprünglicher Code rechnet jede Änderung pro Frame, und der Browser ruft die Zeichenfunktion über requestAnimationFrame in der Regel so oft auf, wie der Bildschirm sein Bild erneuert. Bei 120 Hertz erlischt das Streichholz deshalb nach sechseinhalb statt nach 13 Sekunden.^[1][2]

Bei den Funken wirkt der Fehler doppelt, weil die Schwerkraft pro Frame auf die Geschwindigkeit und die Geschwindigkeit pro Frame auf die Position addiert wird. Die Funken fliegen doppelt so schnell und fallen mit vierfacher Schwerkraft. Für die Korrektur skaliert Ansio jede Änderung mit der Zeit, die seit dem letzten Frame vergangen ist.

Neben 60 Hertz sind laut MDN auch 120 und 144 Hertz weit verbreitet.^[2] Eine nur am Agenturmonitor geprüfte Animation kann beim Kunden im Zeitraffer laufen.

Was sollten Unternehmen bei Animationen auf der Website prüfen?

Unternehmen sollten prüfen, ob Animationen an die verstrichene Zeit statt an die Bildwiederholrate gekoppelt sind und ob die Seite die Einstellung „Bewegung reduzieren“ respektiert.

Die Abfrage prefers-reduced-motion verstehen Chrome ab Version 74, Firefox ab 63 und Safari ab 10.1.^[6] In Ansios ruhiger Fassung fallen Funken und Flackern weg, das Anreißen wird zur Überblendung. Der warme Lichtschein bleibt, da reine Farbe sich nicht bewegt.

Rechtlich ist die ruhige Variante für die meisten Websites eine Kür: WCAG-Kriterium 2.3.3, das abschaltbare Bewegung nach einer Interaktion verlangt, gehört zur höchsten Stufe AAA.^[3] Das Barrierefreiheitsstärkungsgesetz fordert über die Norm EN 301 549 die Stufe AA. Zur Pflicht gehört dagegen Kriterium 2.2.2 der Stufe A: Bewegung, die von selbst startet, länger als fünf Sekunden läuft und neben anderen Inhalten steht, braucht eine Pausenfunktion.^[4] Eine Endlosflamme im Kopfbereich eines Shops fiele darunter, ein per Klick entzündetes Streichholz nicht.

In der Bibliothek SSGOI für Seitenübergänge fand die Redaktion keine Abfrage dieser Einstellung. Testen Sie bei der Abnahme einer Website deshalb gerne auch mit aktivierter Option. Den Rechtsrahmen erklärt der Ratgeber zur barrierefreien Website, passende Dienstleister listet der Vergleich von Webdesign-Agenturen.

Quellen

Mehr Newshunger?

• SSGOI: Seitenübergänge wie in nativen Apps, ohne die View Transition API
• Fluid Functionalism: 28 shadcn-Komponenten, deren Hover dem Mauszeiger folgt
• amazing-glass: Liquid-Glass-Webkomponenten mit echter Lichtbrechung
• Anatomy: Ein Skill für Claude Code zeichnet Ideen als bewegliche Maschinen
• 102 Barrierefreiheitserklärungen von EU-Shops: Nur 44 nennen ein Datum