Kappagen – Emote Rain Overlay triggered by Chat Events #94

New issue

Open

opened 2026-07-15 21:15:03 +02:00 by frank · 0 comments

frank commented

2026-07-15 21:15:03 +02:00

Owner

Kontext

StreamElements' "Kappagen" ist eines der beliebtesten interaktiven Overlay-Features: Bei bestimmten Chat-Events (Sub, Raid, Bits, oder per Kommando) regnen Emojis/Emotes über den Bildschirm. Viewers lieben es, der Chat feiert, und der Stream wird lebendig.

Streamertool hat aktuell keine vergleichbare Overlay-Animation – ein Kappagen macht jeden Stream sofort interaktiver.

Ziel

Kappagen Overlay – Ein Emoticon-/Emoji-Regen-Overlay, das durch Chat-Events, Kommandos und Timer getriggert wird:

1. Trigger-Quellen

Event-Bus-Events: Sub, Resub, Gift-Sub, Sub-Bomb, Raid, Bits, Follow (konfigurierbar pro Typ)
Chat-Kommandos: !kappagen, !hype, !feiern, !konfetti – löst Kappagen für alle Viewer aus
Timer: Automatischer Kappagen alle X Minuten als Stimmungsmacher
Channel Points: Einlösbar per Channel-Points-Reward (Zukunft)
Manuell: Button in Admin-UI

2. Emote-Quellen

Twitch Global Emotes: Kappa, PogChamp, BibleThump, etc.
BTTV/FFZ/7TV Emotes: Channel-spezifische Emotes
Emoji-Fallback: Standard-Emojis als Fallback (🎉, 🎊, 🔥, 💜, 🚀, 👑, ⭐)
Benutzerdefinierte Assets: Eigene PNG/GIFs hochladbar (z. B. Channel-Logo)
Per-Event-Emotes: Unterschiedliche Emotes für Subs (❤️), Raids (🚀), Bits (🔥)

3. Konfiguration

Emote-Dichte: Wie viele Emotes gleichzeitig (10-200)
Fall-Geschwindigkeit: Langsam / Mittel / Schnell / Chaos
Emote-Größe: Klein (16px) bis Riesig (128px)
Fall-Richtung: Von oben (Regen), Von links (Schwall), Von allen Seiten (Explosion)
Dauer: 3s / 5s / 10s / Bis Ende manuell
Hintergrund: Transparent (Standard) oder Farbverlauf/Halbtransparent
Sound-Integration: Optionaler Kappagen-Sound (über Alert-Medien-System)
Overlay-Bereich: Gesamter Bildschirm vs. definierter Bereich (z. B. nur unteres Drittel)

4. Kappagen-Varianten / Presets

Feuerwerk: Emotes fliegen von unten nach oben und explodieren
Konfetti: Kleine, bunte Emotes rieseln sanft
Shower: Emotes regnen von oben, dicht und schnell
Rainbow: Emotes in Regenbogen-Farbverlauf (Farbfilter über Emotes)
Explosion: Alle Emotes gleichzeitig aus der Mitte
Wave: Emotes kommen wellenförmig von links nach rechts
Random: Zufällige Kombination aus Speed + Richtung + Dichte

5. Performance & Overlay

Canvas-basiertes Rendering: ( für 100+ gleichzeitige Partikel)
Frame-Rate: 30/60fps, automatische Drosselung bei vielen Emotes
OBS-Browser-Source: Transparenter Hintergrund
Overlay-Endpoint: /overlay/kappagen
Trigger-Endpoint: /api/overlay/kappagen/trigger?variant=shower&duration=5 – für Admin-UI

6. Admin-UI

Trigger-Button: "Kappagen jetzt auslösen!" mit Preset-Selector
Konfigurations-Panel: Emotes, Dichte, Speed, Dauer, Variante
Emote-Picker: Auswahl aus Twitch/BTTV/7TV/Upper-Emotes
Test-Button: Simuliert einen Kappagen mit aktuellen Settings
Event-Trigger-Konfig: Welche Events lösen Kappagen aus?
Cooldown: Minimum X Sekunden zwischen automatischen Kappagen (Spam-Schutz)

Technische Leitplanken

Canvas 2D für Partikel-System (Effizienz bei 100+ Partikeln)
Emotes werden einmal geladen und im Cache gehalten
Partikel-Physik: Fall + leichte horizontale Drift + Rotation + Fade-Out
Hardware-Beschleunigung via willReadFrequently=false
Nicht blockierend für andere Overlay-Elemente (separater Canvas/Overlay)
Emote-CDN: Emotes von static-cdn.jtvnw.net, cdn.7tv.app, etc.

Akzeptanz

Kappagen wird durch Events (Sub, Raid, Bits) und Kommandos ausgelöst
6+ Kappagen-Varianten (Feuerwerk, Konfetti, Shower, Rainbow, Explosion, Wave)
Emote-Dichte, -Speed und -Größe sind konfigurierbar
BTTV/7TV-Emotes werden unterstützt
Canvas-basiertes Partikel-System läuft flüssig bei 200+ Emotes
Admin-UI mit Trigger-Button, Konfiguration und Test
Event-Trigger-Konfiguration mit Cooldown
Overlay funktioniert als transparente OBS-Browser-Source

Referenzen

StreamElements Kappagen: Emote rain triggered by chat
Sound Alerts Emote Combo: Emote chain combo counter

## Kontext StreamElements' "Kappagen" ist eines der beliebtesten interaktiven Overlay-Features: Bei bestimmten Chat-Events (Sub, Raid, Bits, oder per Kommando) regnen Emojis/Emotes über den Bildschirm. Viewers lieben es, der Chat feiert, und der Stream wird lebendig. Streamertool hat aktuell keine vergleichbare Overlay-Animation – ein Kappagen macht jeden Stream sofort interaktiver. ## Ziel **Kappagen Overlay** – Ein Emoticon-/Emoji-Regen-Overlay, das durch Chat-Events, Kommandos und Timer getriggert wird: ### 1. Trigger-Quellen - **Event-Bus-Events**: Sub, Resub, Gift-Sub, Sub-Bomb, Raid, Bits, Follow (konfigurierbar pro Typ) - **Chat-Kommandos**: `!kappagen`, `!hype`, `!feiern`, `!konfetti` – löst Kappagen für alle Viewer aus - **Timer**: Automatischer Kappagen alle X Minuten als Stimmungsmacher - **Channel Points**: Einlösbar per Channel-Points-Reward (Zukunft) - **Manuell**: Button in Admin-UI ### 2. Emote-Quellen - **Twitch Global Emotes**: Kappa, PogChamp, BibleThump, etc. - **BTTV/FFZ/7TV Emotes**: Channel-spezifische Emotes - **Emoji-Fallback**: Standard-Emojis als Fallback (🎉, 🎊, 🔥, 💜, 🚀, 👑, ⭐) - **Benutzerdefinierte Assets**: Eigene PNG/GIFs hochladbar (z. B. Channel-Logo) - **Per-Event-Emotes**: Unterschiedliche Emotes für Subs (❤️), Raids (🚀), Bits (🔥) ### 3. Konfiguration - **Emote-Dichte**: Wie viele Emotes gleichzeitig (10-200) - **Fall-Geschwindigkeit**: Langsam / Mittel / Schnell / Chaos - **Emote-Größe**: Klein (16px) bis Riesig (128px) - **Fall-Richtung**: Von oben (Regen), Von links (Schwall), Von allen Seiten (Explosion) - **Dauer**: 3s / 5s / 10s / Bis Ende manuell - **Hintergrund**: Transparent (Standard) oder Farbverlauf/Halbtransparent - **Sound-Integration**: Optionaler Kappagen-Sound (über Alert-Medien-System) - **Overlay-Bereich**: Gesamter Bildschirm vs. definierter Bereich (z. B. nur unteres Drittel) ### 4. Kappagen-Varianten / Presets - **Feuerwerk**: Emotes fliegen von unten nach oben und explodieren - **Konfetti**: Kleine, bunte Emotes rieseln sanft - **Shower**: Emotes regnen von oben, dicht und schnell - **Rainbow**: Emotes in Regenbogen-Farbverlauf (Farbfilter über Emotes) - **Explosion**: Alle Emotes gleichzeitig aus der Mitte - **Wave**: Emotes kommen wellenförmig von links nach rechts - **Random**: Zufällige Kombination aus Speed + Richtung + Dichte ### 5. Performance & Overlay - **Canvas-basiertes Rendering**: (<canvas> für 100+ gleichzeitige Partikel) - **Frame-Rate**: 30/60fps, automatische Drosselung bei vielen Emotes - **OBS-Browser-Source**: Transparenter Hintergrund - **Overlay-Endpoint**: `/overlay/kappagen` - **Trigger-Endpoint**: `/api/overlay/kappagen/trigger?variant=shower&duration=5` – für Admin-UI ### 6. Admin-UI - **Trigger-Button**: "Kappagen jetzt auslösen!" mit Preset-Selector - **Konfigurations-Panel**: Emotes, Dichte, Speed, Dauer, Variante - **Emote-Picker**: Auswahl aus Twitch/BTTV/7TV/Upper-Emotes - **Test-Button**: Simuliert einen Kappagen mit aktuellen Settings - **Event-Trigger-Konfig**: Welche Events lösen Kappagen aus? - **Cooldown**: Minimum X Sekunden zwischen automatischen Kappagen (Spam-Schutz) ## Technische Leitplanken - Canvas 2D für Partikel-System (Effizienz bei 100+ Partikeln) - Emotes werden einmal geladen und im Cache gehalten - Partikel-Physik: Fall + leichte horizontale Drift + Rotation + Fade-Out - Hardware-Beschleunigung via `willReadFrequently=false` - Nicht blockierend für andere Overlay-Elemente (separater Canvas/Overlay) - Emote-CDN: Emotes von `static-cdn.jtvnw.net`, `cdn.7tv.app`, etc. ## Akzeptanz - [ ] Kappagen wird durch Events (Sub, Raid, Bits) und Kommandos ausgelöst - [ ] 6+ Kappagen-Varianten (Feuerwerk, Konfetti, Shower, Rainbow, Explosion, Wave) - [ ] Emote-Dichte, -Speed und -Größe sind konfigurierbar - [ ] BTTV/7TV-Emotes werden unterstützt - [ ] Canvas-basiertes Partikel-System läuft flüssig bei 200+ Emotes - [ ] Admin-UI mit Trigger-Button, Konfiguration und Test - [ ] Event-Trigger-Konfiguration mit Cooldown - [ ] Overlay funktioniert als transparente OBS-Browser-Source ## Referenzen - StreamElements Kappagen: Emote rain triggered by chat - Sound Alerts Emote Combo: Emote chain combo counter

frank added this to the Overlays & Widgets milestone

2026-07-15 21:15:03 +02:00

frank self-assigned this

2026-07-15 21:15:03 +02:00

frank referenced this issue

2026-07-15 21:15:08 +02:00

Overlay Theme System – Zentrale CSS-Tokens, Themes & Presets für alle Widgets #96

frank added the

quick-win

effort:small

area:overlays

labels