# 🎨 TikTok Visual Effects Overlay

Konfiguriere dein WebGL Effekt-Overlay mit 4 verschiedenen visuellen Modi für TikTok Livestreams

## 🎭 Effekt-Typ

Wähle deinen Effekt:

Tipp: Jeder Effekt verwendet unterschiedliche Rendering-Techniken für maximale visuelle Wirkung!

## 👁️ Echtzeit-Vorschau

Die Vorschau zeigt deine Einstellungen in Echtzeit. Alle Änderungen werden sofort sichtbar.

### 📍 Rahmen-Positionierung (in %)

Definiere die Position und Größe des Effekt-Rahmens innerhalb der Vorschau

X-Position (%)
Y-Position (%)
Breite (%)
Höhe (%)

## 📐 Auflösung & Format

Resolution Preset:
Breite (px):
Höhe (px):

## 🖼️ Rahmen Einstellungen

Rahmen Position:
Rahmenbreite: 150 px
Nur Kanten maskieren (weicherer Übergang)

## 🎨 Flammen Aussehen

Flammenfarbe:
Hintergrund Tint:
Hintergrund Transparenz: 0.0

## ⚡ Animation

Flammen Geschwindigkeit: 0.5
Flammen Intensität (Turbulenz): 1.3
Helligkeit: 0.25

## ✨ Visuelle Effekte

Glow-Effekt aktivieren
Additive Blending (hellere Flammen)
High DPI Support (bessere Qualität auf 4K)

### 📋 OBS Browser Source Einrichtung

1. In OBS eine neue Browser Source erstellen

2. URL eingeben: `http://localhost:3000/flame-overlay/overlay`

3. Breite und Höhe entsprechend deiner Auswahl einstellen

4. "Shutdown source when not visible" deaktivieren (für bessere Performance)

5. Transparenter Hintergrund ist bereits aktiviert ✅

### 💡 Tipps

• Rahmen Position: Wähle "Unten" für klassisches TikTok-Layout, "Rundherum" für volle Immersion

• Intensität: Höhere Werte erzeugen wildere, chaotischere Flammen

• Geschwindigkeit: Niedrigere Werte für ruhige, höhere für energetische Flammen

• Additive Blending: Macht Flammen heller und leuchtender (empfohlen)