🎨 Add new Flux icons: implement multiple reusable icon components (e.g., hand-raised, hand-thumb-up, heart, hashtag, home) with variant support for improved UI consistency.

2026-01-28 07:43:18 +00:00 · 2026-01-23 23:00:02 +01:00
parent 578e4f13fc
commit b30fec150c
792 changed files with 307541 additions and 117 deletions
--- a/videos/AUDIO_GUIDE.md
+++ b/videos/AUDIO_GUIDE.md
@@ -0,0 +1,323 @@
+# Audio Guide - NIP-05 Tutorial Video
+
+Dieser Guide erklärt, wie du Musik und Sound-Effekte zum Video hinzufügst.
+
+## 📁 Ordnerstruktur
+
+Erstelle folgende Ordner im `public/` Verzeichnis:
+
+```
+public/
+├── music/
+│   └── background-music.mp3
+└── sfx/
+    ├── logo-whoosh.mp3
+    ├── logo-reveal.mp3
+    ├── card-slide.mp3
+    ├── ui-appear.mp3
+    ├── typing.mp3
+    ├── slide-in.mp3
+    ├── button-hover.mp3
+    ├── button-click.mp3
+    ├── success-chime.mp3
+    ├── success-fanfare.mp3
+    ├── badge-appear.mp3
+    ├── checkmark-pop.mp3
+    ├── outro-entrance.mp3
+    ├── url-emphasis.mp3
+    └── final-chime.mp3
+```
+
+## 🎵 Benötigte Audio-Dateien
+
+### Hintergrundmusik (Optional)
+
+**Datei:** `music/background-music.mp3`
+**Beschreibung:** Motivierende, moderne elektronische Musik
+**Dauer:** ~40 Sekunden (zum Loopen)
+**Stimmung:** Energetisch, technologisch, Bitcoin/Crypto-Theme
+
+**Suchbegriffe:**
+- "tech background music"
+- "corporate technology music"
+- "modern electronic beat"
+- "crypto blockchain music"
+- "upbeat tech loop"
+
+### Sound-Effekte
+
+#### 1. Logo Whoosh (Intro - 0s)
+**Datei:** `sfx/logo-whoosh.mp3`
+**Beschreibung:** Schneller Whoosh/Swoosh für Logo-Entrance
+**Dauer:** ~0.5s
+**Suchbegriffe:** "whoosh", "swoosh", "fast transition", "logo reveal"
+
+#### 2. Logo Reveal (Intro - 0.5s)
+**Datei:** `sfx/logo-reveal.mp3`
+**Beschreibung:** Heller Chime/Bell für Logo-Erscheinen
+**Dauer:** ~1s
+**Suchbegriffe:** "chime", "bell", "reveal", "logo ding", "notification"
+
+#### 3. Card Slide (UI Showcase - 4s)
+**Datei:** `sfx/card-slide.mp3`
+**Beschreibung:** Sanfter Slide/Swoosh für Karten-Animation
+**Dauer:** ~0.5s
+**Suchbegriffe:** "slide in", "swoosh", "card appear", "UI transition"
+
+#### 4. UI Appear (UI Showcase - 4.5s)
+**Datei:** `sfx/ui-appear.mp3`
+**Beschreibung:** Leichter Pop/Click für UI-Elemente
+**Dauer:** ~0.3s
+**Suchbegriffe:** "pop", "bubble", "UI click", "soft notification"
+
+#### 5. Typing (Input Demo - 10s)
+**Datei:** `sfx/typing.mp3`
+**Beschreibung:** Tastatur-Typing Sound (Loop oder lang)
+**Dauer:** ~2s
+**Suchbegriffe:** "keyboard typing", "mechanical keyboard", "type sound", "typing loop"
+
+#### 6. Slide In (Input Demo - 12.5s)
+**Datei:** `sfx/slide-in.mp3`
+**Beschreibung:** Slide für Rules-Box
+**Dauer:** ~0.4s
+**Suchbegriffe:** "slide", "smooth transition", "panel slide"
+
+#### 7. Button Hover (Save Button - 19.5s)
+**Datei:** `sfx/button-hover.mp3`
+**Beschreibung:** Subtiler Hover-Sound
+**Dauer:** ~0.2s
+**Suchbegriffe:** "button hover", "UI hover", "soft beep", "subtle click"
+
+#### 8. Button Click (Save Button - 20s)
+**Datei:** `sfx/button-click.mp3`
+**Beschreibung:** Klarer Button-Click
+**Dauer:** ~0.3s
+**Suchbegriffe:** "button click", "UI button", "click", "press button"
+
+#### 9. Success Chime (Save Button - 20.5s)
+**Datei:** `sfx/success-chime.mp3`
+**Beschreibung:** Positiver Success-Sound
+**Dauer:** ~1s
+**Suchbegriffe:** "success", "achievement", "positive chime", "notification success"
+
+#### 10. Success Fanfare (Verification - 23s)
+**Datei:** `sfx/success-fanfare.mp3`
+**Beschreibung:** Celebration/Achievement Sound
+**Dauer:** ~2s
+**Suchbegriffe:** "fanfare", "victory", "achievement", "level up", "success fanfare"
+
+#### 11. Badge Appear (Verification - 23.5s)
+**Datei:** `sfx/badge-appear.mp3`
+**Beschreibung:** Sparkle/Shimmer für Badge
+**Dauer:** ~0.5s
+**Suchbegriffe:** "sparkle", "shimmer", "magic", "badge unlock", "achievement pop"
+
+#### 12. Checkmark Pop (Verification - 25s)
+**Datei:** `sfx/checkmark-pop.mp3`
+**Beschreibung:** Pop für Checkmark
+**Dauer:** ~0.3s
+**Suchbegriffe:** "pop", "bubble pop", "checkmark", "confirm sound"
+
+#### 13. Outro Entrance (Outro - 28s)
+**Datei:** `sfx/outro-entrance.mp3`
+**Beschreibung:** Eleganter Entrance für Outro
+**Dauer:** ~1s
+**Suchbegriffe:** "elegant whoosh", "smooth transition", "outro intro"
+
+#### 14. URL Emphasis (Outro - 30s)
+**Datei:** `sfx/url-emphasis.mp3`
+**Beschreibung:** Attention-grabbing Sound für URL
+**Dauer:** ~1.5s
+**Suchbegriffe:** "emphasis", "attention", "important", "highlight sound", "focus"
+
+#### 15. Final Chime (Outro - 36s)
+**Datei:** `sfx/final-chime.mp3`
+**Beschreibung:** Abschließender harmonischer Chime
+**Dauer:** ~2s
+**Suchbegriffe:** "final chime", "ending bell", "closure", "harmonious end"
+
+## 🌐 Lizenzfreie Audio-Quellen
+
+### Kostenlos & Hochwertig
+
+1. **Pixabay Sound Effects** (Empfohlen!)
+   - URL: https://pixabay.com/sound-effects/
+   - Lizenz: Pixabay License (kostenlose kommerzielle Nutzung)
+   - Qualität: Sehr gut
+   - Suche: Englische Begriffe verwenden
+
+2. **Freesound.org**
+   - URL: https://freesound.org/
+   - Lizenz: Creative Commons (verschiedene, CC0 bevorzugen)
+   - Qualität: Variiert
+   - Hinweis: Account erforderlich
+
+3. **ZapSplat**
+   - URL: https://www.zapsplat.com/
+   - Lizenz: Kostenlos mit Namensnennung
+   - Qualität: Professionell
+   - Hinweis: Account erforderlich
+
+4. **Mixkit**
+   - URL: https://mixkit.co/free-sound-effects/
+   - Lizenz: Mixkit License (frei verwendbar)
+   - Qualität: Sehr gut
+   - Kategorien: Gut sortiert
+
+5. **Adobe Sound Effects** (Kostenlos)
+   - URL: https://www.adobe.com/products/audition/offers/AdobeAuditionDLCSFX.html
+   - Lizenz: Kostenlos für Adobe-Nutzer
+   - Qualität: Professionell
+
+### Musik-Spezifisch
+
+1. **Pixabay Music**
+   - URL: https://pixabay.com/music/
+   - Lizenz: Kostenlos
+   - Gut für Background Music
+
+2. **YouTube Audio Library**
+   - URL: https://studio.youtube.com/ → Audio Library
+   - Lizenz: Meist frei verwendbar
+   - Große Auswahl
+
+3. **Incompetech**
+   - URL: https://incompetech.com/music/
+   - Lizenz: CC BY (mit Namensnennung)
+   - Bekannt für Royalty-Free Music
+
+## 🎬 Audio aktivieren/deaktivieren
+
+### Einzelne Sounds deaktivieren
+
+Kommentiere einfach die entsprechende `<Audio>`-Komponente in `src/components/AudioManager.tsx` aus:
+
+```tsx
+{/* Dieser Sound ist deaktiviert
+<Sequence from={0}>
+  <Audio src={staticFile("sfx/logo-whoosh.mp3")} volume={0.6} />
+</Sequence>
+*/}
+```
+
+### Hintergrundmusik aktivieren
+
+Entferne die Kommentare um die Background Music in `AudioManager.tsx`:
+
+```tsx
+<Audio
+  src={staticFile("music/background-music.mp3")}
+  volume={0.3}
+  loop
+/>
+```
+
+### Lautstärke anpassen
+
+Ändere den `volume` Wert (0.0 bis 1.0):
+
+```tsx
+<Audio src={staticFile("sfx/button-click.mp3")} volume={0.8} />
+```
+
+## 🔧 Tipps & Best Practices
+
+### Lautstärke-Balance
+
+- **Hintergrundmusik:** 0.2 - 0.4 (leise)
+- **Wichtige UI-Sounds:** 0.4 - 0.6 (mittel)
+- **Success/Celebration:** 0.5 - 0.7 (laut)
+- **Subtile Effekte:** 0.2 - 0.4 (sehr leise)
+
+### Audio-Dateien optimieren
+
+1. **Format:** MP3 (beste Kompatibilität)
+2. **Bitrate:** 128-192 kbps (gute Qualität, kleine Dateigröße)
+3. **Sample Rate:** 44.1 kHz (Standard)
+4. **Mono vs Stereo:** Stereo für Musik, Mono oft ausreichend für SFX
+
+### Conversion Tools
+
+- **Audacity** (kostenlos): https://www.audacityteam.org/
+- **Online Audio Converter**: https://online-audio-converter.com/
+
+### Timing anpassen
+
+Wenn ein Sound zu früh/spät kommt, ändere den `from` Wert in `AudioManager.tsx`:
+
+```tsx
+<Sequence from={4.2 * fps}> {/* Verschoben von 4s auf 4.2s */}
+  <Audio src={staticFile("sfx/card-slide.mp3")} volume={0.4} />
+</Sequence>
+```
+
+## ✅ Schnellstart-Checklist
+
+1. ✅ `@remotion/media` installiert (bereits erledigt)
+2. ✅ `AudioManager.tsx` erstellt (bereits erledigt)
+3. ✅ AudioManager in `Nip05Tutorial.tsx` eingebunden (bereits erledigt)
+4. ⏳ Ordner `public/music/` und `public/sfx/` erstellen
+5. ⏳ Sound-Dateien von Pixabay/Freesound herunterladen
+6. ⏳ Dateien in die richtigen Ordner kopieren
+7. ⏳ Video im Remotion Studio testen
+8. ⏳ Lautstärken nach Bedarf anpassen
+
+## 🎯 Empfohlenes Vorgehen
+
+### Phase 1: Wichtigste Sounds (5 Minuten)
+Starte mit diesen essentiellen Sounds:
+1. `button-click.mp3` (Save Button)
+2. `success-chime.mp3` (Erfolg)
+3. `typing.mp3` (Input Demo)
+
+### Phase 2: UI-Feedback (5 Minuten)
+Füge UI-Interaktionen hinzu:
+4. `card-slide.mp3`
+5. `ui-appear.mp3`
+6. `slide-in.mp3`
+
+### Phase 3: Polish (10 Minuten)
+Vervollständige das Erlebnis:
+7. Alle restlichen SFX
+8. Hintergrundmusik (optional)
+9. Feintuning der Lautstärken
+
+## 🎼 Musik-Alternative: AI-generierte Musik
+
+Falls du Musik generieren lassen möchtest (nicht durch mich, aber durch spezialisierte Tools):
+
+1. **Suno AI** (suno.ai) - AI Music Generator
+2. **Mubert** (mubert.com) - AI Music für Videos
+3. **AIVA** (aiva.ai) - AI Composer
+4. **Soundraw** (soundraw.io) - Customize AI Music
+
+Prompt-Beispiel für Bitcoin/Tech-Musik:
+```
+"Upbeat electronic background music, modern tech vibe,
+cryptocurrency theme, motivational, 120 BPM, loop-friendly,
+no vocals, 40 seconds"
+```
+
+## 🆘 Troubleshooting
+
+### Audio spielt nicht
+- Prüfe, ob die Datei im richtigen Ordner liegt
+- Dateiname korrekt? (case-sensitive!)
+- Format ist MP3?
+
+### Audio ist zu leise/laut
+- Passe `volume` Wert an (0.0 - 1.0)
+- Prüfe Lautstärke der Originaldatei
+
+### Audio ist nicht synchron
+- Ändere `from` Wert in Frames
+- Nutze `fps` Variable: `from={4.5 * fps}`
+
+### Audio wird nicht gerendert
+- `@remotion/media` installiert?
+- Importiert in `AudioManager.tsx`?
+- `AudioManager` in Hauptkomposition eingebunden?
+
+---
+
+Viel Erfolg beim Sound-Design! 🎵🔊