Interactive Overlay Effects – Viewer-getriggerte Bildschirm-Effekte (Konfetti, Screen Shake, Glow) #98

New issue

Open

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

frank commented

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

Owner

Kontext

Moderne Streamer-Tools wie Sound Alerts, StreamElements und Streamlabs bieten interaktive Overlay-Effekte, die Viewer auslösen können: Bildschirm-Effekte per Channel Points, Bits oder Chat-Kommandos. Diese machen den Stream lebendig und geben Viewern das Gefühl, Teil der Show zu sein.

Streamertool hat ein generisches Alert-System (#24), aber keine dedizierten Overlay-Spezialeffekte, die unabhängig von einem Alert-Event ausgelöst werden können.

Ziel

Interactive Overlay Effects System – Viewer-triggerbare Vollbild-Effekte für den Stream:

1. Effekt-Arten

Konfetti / Confetti – Bunte Papierschnipsel regnen (10-30s)
Screen Shake – Kurzer, heftiger Ruckler im Bild (0.5-2s)
Screen Flash – Kurzer weißer/blinkender Flash (200-500ms)
Glow / Highlight – Rahmen um den Stream leuchtet auf (3-5s)
Rainbow Border – Regenbogen-Rahmen für X Sekunden
Emoji Explosion – Emojis fliegen aus der Bildschirmmitte
Vignette / Darken – Kurzes Abdunkeln der Ränder (für dramatische Effekte)
Color Overlay – Transparenter Farblayer über dem Bild (für Stimmung)
Zoom / Pulse – Kurzer Zoom-Effekt (für Sub-Bomb / große Events)
Progressives Combo – Je häufiger ein Effekt in 5min getriggert wird, desto intensiver

2. Trigger-Quellen

Chat-Kommandos: !confetti, !shake, !glow, !hype, !party
- Pro-Command-Cooldown: 30s pro User, 5s global
- Permission-Level: Jeder / Follower / Sub / VIP / Mod
Event-Bus-Events:
- twitch.subscribe → Konfetti (einfach)
- twitch.subscription-gift → Konfetti (mittel)
- twitch.cheer (>=500) → Screen Shake
- twitch.raid (>=10) → Rainbow Border + Konfetti
- goal.achieved → Konfetti Party (episch)
Channel Points (zukünftig, siehe #49/#72): Effekte als Channel-Points-Rewards einlösbar
Manuell: Admin-UI-Button "Effekt auslösen"
Timer: Automatischer "Random Effect" alle 30 Min (wenn aktiviert)

3. Effekt-Kombinationen (Macros)

Party Mode: Konfetti + Rainbow Border + Zoom gleichzeitig
Hype Train: Progressive Combo (jeder Cheer verstärkt den Effekt)
Sub Celebration: Konfetti + Glow (Gold) + Vignette
Raid Welcome: Rainbow Border + Confetti + "Welcome!"
Custom Macros: Benutzerdefinierte Effekt-Ketten mit Verzögerung

4. Konfiguration pro Effekt

Dauer: Sekunden (default pro Effekt)
Intensität: Schwach / Mittel / Stark
Farbe: Primäre Effektfarbe (für Konfetti, Glow, Flash)
Trigger-Konfiguration: Welche Events welchen Effekt auslösen
Cooldown: Global-Cooldown nach Effekt (Spam-Schutz)
Sound: Optionaler Sound-Effekt bei Trigger (via Media-System)
Deaktivieren: Pro Effekt ein-/ausschaltbar

5. Admin-UI

Effekt-Übersicht: Alle Effekte mit Preview-Button, Toggle und Intensitäts-Slider
Trigger-Konfiguration: Tabelle "Event → Effekt" (Drag-and-Drop)
Macro-Editor: Effekte kombinieren + Verzögerung + Reihenfolge
Test-Bereich: Effekt jetzt auslösen, siehe Live-Vorschau
Statistik: Welcher Effekt wurde wie oft getriggert?

6. Overlay-Endpoint

/overlay/effects – Canvas-basiertes Effekt-Overlay
WebSocket-Kommunikation: Trigger-Events werden an das Overlay gesendet
Transparenter Hintergrund (über anderem Content im OBS)
Multi-Layer: Ein Effekt-Overlay für alle Effekte (kein neues Browser-Fenster pro Effekt)
Prioritäts-Queue: Bei mehreren gleichzeitigen Effekten wird priorisiert (Party > Konfetti > Vignette)

7. Performance

Canvas 2D für Konfetti/Emoji-Partikel
CSS-Animationen für Screen Shake, Flash, Glow, Rainbow Border (GPU-beschleunigt)
Ein Effekt-Overlay für alle Effekte (nur 1 Browser-Source nötig)
Auto-Drosselung: Bei >5 Effekten in 10s werden kleine Effekte ignoriert
Max 3 gleichzeitige Effekte (Priorität: höhere > niedrigere)

Technische Leitplanken

Canvas 2D für Partikel-Effekte (Konfetti, Emoji Explosion)
CSS-Animationen + @keyframes für Screen-Effekte (Screen Shake, Flash, Glow, Rainbow Border)
Ein separates Canvas-Overlay für alle Effekte (nicht pro Effekt einzeln)
WebSocket-Kommunikation für Echtzeit-Trigger (wie existierende Overlay-Architektur)
Spam-Schutz: Cooldowns + Drosselung + Max-Queue-Länge
Effekt-Konfiguration in SQLite (overlay_effects-Tabelle)

Akzeptanz

9+ Effekt-Arten (Konfetti, Shake, Flash, Glow, Rainbow, Emoji, Vignette, Color, Zoom)
Effekte werden via Chat-Kommandos, Event-Bus und Admin-UI getriggert
Cooldown und Permission-Level (Jeder/Follower/Sub/Mod) funktionieren
Effekt-Macros mit Kombinationen und Verzögerung sind konfigurierbar
Admin-UI mit Preview, Toggle, Intensität und Trigger-Konfiguration
Spam-Schutz (Drosselung, Queue) verhindert Overload
Canvas läuft flüssig bei Konfetti + Rainbow + Shake gleichzeitig
Overlay als transparente OBS-Browser-Source (ein Fenster für alle Effekte)

Referenzen

Sound Alerts: Interactive overlays (Konfetti, Effekte)
StreamElements: Kappagen, Hype Train overlay
Streamlabs: Celebration effects

## Kontext Moderne Streamer-Tools wie Sound Alerts, StreamElements und Streamlabs bieten interaktive Overlay-Effekte, die Viewer auslösen können: Bildschirm-Effekte per Channel Points, Bits oder Chat-Kommandos. Diese machen den Stream lebendig und geben Viewern das Gefühl, Teil der Show zu sein. Streamertool hat ein generisches Alert-System (#24), aber keine dedizierten Overlay-Spezialeffekte, die unabhängig von einem Alert-Event ausgelöst werden können. ## Ziel **Interactive Overlay Effects System** – Viewer-triggerbare Vollbild-Effekte für den Stream: ### 1. Effekt-Arten - **Konfetti / Confetti** – Bunte Papierschnipsel regnen (10-30s) - **Screen Shake** – Kurzer, heftiger Ruckler im Bild (0.5-2s) - **Screen Flash** – Kurzer weißer/blinkender Flash (200-500ms) - **Glow / Highlight** – Rahmen um den Stream leuchtet auf (3-5s) - **Rainbow Border** – Regenbogen-Rahmen für X Sekunden - **Emoji Explosion** – Emojis fliegen aus der Bildschirmmitte - **Vignette / Darken** – Kurzes Abdunkeln der Ränder (für dramatische Effekte) - **Color Overlay** – Transparenter Farblayer über dem Bild (für Stimmung) - **Zoom / Pulse** – Kurzer Zoom-Effekt (für Sub-Bomb / große Events) - **Progressives Combo** – Je häufiger ein Effekt in 5min getriggert wird, desto intensiver ### 2. Trigger-Quellen - **Chat-Kommandos**: `!confetti`, `!shake`, `!glow`, `!hype`, `!party` - Pro-Command-Cooldown: 30s pro User, 5s global - Permission-Level: Jeder / Follower / Sub / VIP / Mod - **Event-Bus-Events**: - `twitch.subscribe` → Konfetti (einfach) - `twitch.subscription-gift` → Konfetti (mittel) - `twitch.cheer` (>=500) → Screen Shake - `twitch.raid` (>=10) → Rainbow Border + Konfetti - `goal.achieved` → Konfetti Party (episch) - **Channel Points** (zukünftig, siehe #49/#72): Effekte als Channel-Points-Rewards einlösbar - **Manuell**: Admin-UI-Button "Effekt auslösen" - **Timer**: Automatischer "Random Effect" alle 30 Min (wenn aktiviert) ### 3. Effekt-Kombinationen (Macros) - **Party Mode**: Konfetti + Rainbow Border + Zoom gleichzeitig - **Hype Train**: Progressive Combo (jeder Cheer verstärkt den Effekt) - **Sub Celebration**: Konfetti + Glow (Gold) + Vignette - **Raid Welcome**: Rainbow Border + Confetti + "Welcome!" - **Custom Macros**: Benutzerdefinierte Effekt-Ketten mit Verzögerung ### 4. Konfiguration pro Effekt - **Dauer**: Sekunden (default pro Effekt) - **Intensität**: Schwach / Mittel / Stark - **Farbe**: Primäre Effektfarbe (für Konfetti, Glow, Flash) - **Trigger-Konfiguration**: Welche Events welchen Effekt auslösen - **Cooldown**: Global-Cooldown nach Effekt (Spam-Schutz) - **Sound**: Optionaler Sound-Effekt bei Trigger (via Media-System) - **Deaktivieren**: Pro Effekt ein-/ausschaltbar ### 5. Admin-UI - **Effekt-Übersicht**: Alle Effekte mit Preview-Button, Toggle und Intensitäts-Slider - **Trigger-Konfiguration**: Tabelle "Event → Effekt" (Drag-and-Drop) - **Macro-Editor**: Effekte kombinieren + Verzögerung + Reihenfolge - **Test-Bereich**: Effekt jetzt auslösen, siehe Live-Vorschau - **Statistik**: Welcher Effekt wurde wie oft getriggert? ### 6. Overlay-Endpoint - `/overlay/effects` – Canvas-basiertes Effekt-Overlay - WebSocket-Kommunikation: Trigger-Events werden an das Overlay gesendet - Transparenter Hintergrund (über anderem Content im OBS) - Multi-Layer: Ein Effekt-Overlay für alle Effekte (kein neues Browser-Fenster pro Effekt) - Prioritäts-Queue: Bei mehreren gleichzeitigen Effekten wird priorisiert (Party > Konfetti > Vignette) ### 7. Performance - Canvas 2D für Konfetti/Emoji-Partikel - CSS-Animationen für Screen Shake, Flash, Glow, Rainbow Border (GPU-beschleunigt) - Ein Effekt-Overlay für alle Effekte (nur 1 Browser-Source nötig) - Auto-Drosselung: Bei >5 Effekten in 10s werden kleine Effekte ignoriert - Max 3 gleichzeitige Effekte (Priorität: höhere > niedrigere) ## Technische Leitplanken - Canvas 2D für Partikel-Effekte (Konfetti, Emoji Explosion) - CSS-Animationen + `@keyframes` für Screen-Effekte (Screen Shake, Flash, Glow, Rainbow Border) - Ein separates Canvas-Overlay für alle Effekte (nicht pro Effekt einzeln) - WebSocket-Kommunikation für Echtzeit-Trigger (wie existierende Overlay-Architektur) - Spam-Schutz: Cooldowns + Drosselung + Max-Queue-Länge - Effekt-Konfiguration in SQLite (`overlay_effects`-Tabelle) ## Akzeptanz - [ ] 9+ Effekt-Arten (Konfetti, Shake, Flash, Glow, Rainbow, Emoji, Vignette, Color, Zoom) - [ ] Effekte werden via Chat-Kommandos, Event-Bus und Admin-UI getriggert - [ ] Cooldown und Permission-Level (Jeder/Follower/Sub/Mod) funktionieren - [ ] Effekt-Macros mit Kombinationen und Verzögerung sind konfigurierbar - [ ] Admin-UI mit Preview, Toggle, Intensität und Trigger-Konfiguration - [ ] Spam-Schutz (Drosselung, Queue) verhindert Overload - [ ] Canvas läuft flüssig bei Konfetti + Rainbow + Shake gleichzeitig - [ ] Overlay als transparente OBS-Browser-Source (ein Fenster für alle Effekte) ## Referenzen - Sound Alerts: Interactive overlays (Konfetti, Effekte) - StreamElements: Kappagen, Hype Train overlay - Streamlabs: Celebration effects

frank added this to the Overlays & Widgets milestone

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

frank self-assigned this

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

frank added the

priority:medium

effort:medium

area:overlays

labels

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