einundzwanzig-verein/videos/NIP05-TUTORIAL-README.md

NIP-05 Tutorial Video - EINUNDZWANZIG

Eine 38-sekündige 3D-animierte Tutorial-Video, das zeigt, wie man ein Nostr NIP-05 Handle auf der EINUNDZWANZIG-Plattform erstellt.

Video-Struktur

Das Video besteht aus 6 Szenen mit 3D-Elementen, Bitcoin-Effekten und animierten EINUNDZWANZIG Logos:

1. IntroScene (0-4s): Eröffnung mit animiertem EINUNDZWANZIG Square Logo und Titel
2. UIShowcaseScene (4-10s): Zeigt die NIP-05-Karten-Oberfläche mit animierten Logos in den Ecken
3. InputDemoScene (10-18s): Demonstriert die Handle-Eingabe mit animiertem Square Logo
4. SaveButtonScene (18-23s): Zeigt das Klicken des Speichern-Buttons mit Success-Logo
5. VerificationScene (23-28s): Zeigt erfolgreiche Verifizierung mit animiertem Logo und 3D-Schild
6. OutroScene (28-38s): Verlängerte Szene (10 Sekunden) mit großem Fokus auf verein.einundzwanzig.space

Technische Details

• Dauer: 38 Sekunden (1140 Frames bei 30fps)
• Auflösung: 1920x1080 (Full HD)
• Frame Rate: 30fps
• Verwendete Technologien:
  • Remotion 4.0
  • React Three Fiber & Three.js für 3D-Elemente
  • Tailwind CSS 4.0 für Styling
  • TypeScript
  • Offizielles EINUNDZWANZIG Wallpaper und Logos

Design-Highlights

AnimatedLogo Komponente

Neue wiederverwendbare Komponente mit fancy Animationen:

• EINUNDZWANZIG Square Logo (einundzwanzig-square-inverted.svg)
• 3D rotierender Ring um das Logo
• Glüh-Effekt mit Pulsation
• Schwebende Animation (floating)
• 8 rotierende Partikel um das Logo
• Spring-basierte Skalierung und Rotation
• Vollständig anpassbare Größe und Verzögerung

Wallpaper-Hintergrund

Jede Szene verwendet das offizielle EINUNDZWANZIG Wallpaper (einundzwanzig-wallpaper.png) als Hintergrund mit einem dunklen Overlay für bessere Lesbarkeit.

Bitcoin-Effekt

Alle Szenen enthalten einen durchgängigen Bitcoin-Partikel-Effekt mit:

• 15 animierte Bitcoin-Symbole
• Fallende Animation mit Golden Ratio Verteilung
• Fade-in/Fade-out beim Ein-/Ausblenden
• Rotation während des Falls

Farbschema

Verwendet ausschließlich die offiziellen Farben aus app.css:

• Neutral/Zinc Töne: neutral-50 bis neutral-950
• Bitcoin Orange: #f7931a (offizielle Bitcoin-Farbe)
• Akzentfarben: Entsprechend der EINUNDZWANZIG Brand Guidelines

3D-Elemente

• Animierte EINUNDZWANZIG Square Logos mit 3D-Ringen
• Geometrische Formen als Wireframes
• Metallische Bitcoin-farbene Materialien
• Animierte Schilde
• Glüh- und Partikel-Effekte

EINUNDZWANZIG Branding

• Square Logo (einundzwanzig-square-inverted.svg) in allen Szenen
• Horizontal Logo (einundzwanzig-horizontal-inverted.svg) im Outro
• Offizielle Wallpaper durchgängig
• Kein ".e.V." oder "Deutschland" im Text - nur "EINUNDZWANZIG"

Verwendung

Preview im Remotion Studio

cd videos
npm run dev

Dann "Nip05Tutorial" aus der Compositions-Liste auswählen.

Video rendern

npx remotion render Nip05Tutorial nip05-tutorial.mp4

Mit benutzerdefinierten Einstellungen rendern

npx remotion render Nip05Tutorial nip05-tutorial.mp4 --codec=h264 --quality=90

Anpassung

Das Video kann einfach angepasst werden durch Bearbeitung der Szenen-Dateien in src/scenes/:

• Timing: durationInFrames in src/Nip05Tutorial.tsx anpassen
• Farben: Neutral-Farben und #f7931a verwenden
• Text: Textinhalte in individuellen Szenen-Dateien ändern
• Logo-Größe: size prop in <AnimatedLogo /> anpassen
• Logo-Verzögerung: delay prop in <AnimatedLogo /> anpassen
• Animations-Geschwindigkeit: spring() Config-Werte und interpolate() Bereiche anpassen

Szenen-Übersicht

IntroScene

• Großes animiertes EINUNDZWANZIG Square Logo (350px)
• Spring-animierter Titel mit Skalierung und Opacity
• Verzögerte Untertitel-Animation
• Bitcoin-Partikel-Effekt
• Wallpaper-Hintergrund mit Overlay

UIShowcaseScene

• Animierte Square Logos in beiden oberen Ecken (150px, halbtransparent)
• Wireframe 3D-Sphären und Oktaeder im Hintergrund
• Karten-Eingangs-Animation mit Bounce-Effekt
• Nachbau der tatsächlichen UI aus benefits.blade.php
• Neutral-Farbschema mit Bitcoin-Orange-Akzenten

InputDemoScene

• Animiertes EINUNDZWANZIG Square Logo links oben (250px)
• Typewriter-Effekt für Handle-Eingabe
• Blinkender Cursor-Animation
• Animiertes Zeiger-Emoji
• Regel-Box gleitet nach Typing ein

SaveButtonScene

• Animiertes EINUNDZWANZIG Logo erscheint bei Erfolg (280px)
• Animierte Cursor-Bewegung zum Button
• Button-Press-Effekt (Skalierung)
• Erfolgs-Nachricht mit Checkmark
• Neutral-800 Farbschema

VerificationScene

• Großes animiertes EINUNDZWANZIG Logo oben (320px)
• 3D-Schild mit Rotation im Hintergrund
• Badge mit Eingangs-Animation
• Handle-Listen-Anzeige
• Schwebende Checkmark-Partikel

OutroScene (10 Sekunden - mehr als doppelt so lang!)

• Animiertes EINUNDZWANZIG Square Logo oben (180px)
• EINUNDZWANZIG Horizontal SVG-Logo
• HAUPTFOKUS: verein.einundzwanzig.space
  • Riesige Schrift (text-7xl = 72px)
  • Orange Border (#f7931a)
  • Glüh-Effekt dahinter
  • Pulsations-Animation
  • 10 Sekunden sichtbar
  • Accent-Line darunter
• "Werde jetzt Mitglied!" Text
• Gestaffelte Animationen (Logo → SVG → CTA → URL → Footer)
• Vorteile-Footer (Nostr Relay, NIP-05, Lightning Watchtower)

Assets

Bilder

• einundzwanzig-wallpaper.png - Offizielles Hintergrund-Wallpaper

SVG-Logos

• einundzwanzig-square-inverted.svg - Quadratisches Logo (NEU!)
• einundzwanzig-horizontal-inverted.svg - Horizontales Logo für Outro

3D-Elemente

Alle 3D-Elemente werden prozedural generiert mit Three.js:

• Torus Geometrie für Logo-Ringe
• Box, Sphere, Octahedron, Icosahedron für Hintergrund-Partikel
• Cylinder für Schild

Komponenten

BitcoinEffect

• 15 fallende Bitcoin-Symbole
• Golden Ratio Verteilung
• Fade-in/out Animationen
• Rotation

AnimatedLogo (NEU!)

• EINUNDZWANZIG Square Logo Animation
• 3D rotierender Ring
• Glüh-Effekt mit Pulsation
• Floating Animation
• 8 rotierende Partikel
• Props: size (number), delay (frames)

Farben-Referenz

Alle Farben entsprechen den EINUNDZWANZIG Brand Guidelines aus app.css:

/* Hauptfarben */
--color-neutral-50 bis --color-neutral-950

/* Bitcoin Orange (offiziell) */
#f7931a

/* Akzent */
--color-accent: neutral-800 (light mode)
--color-accent: white (dark mode)

Animation Best Practices

• Alle Animationen driven by useCurrentFrame() (keine CSS-Animationen)
• Spring-Physik für natürliche Bewegung
• Korrektes Sequencing mit premountFor für smoothes Laden
• Easing und Interpolation für glatte Übergänge
• 3D-Elemente synchronisiert mit Timeline via useCurrentFrame()

Remotion Best Practices

Folgt allen Remotion Best Practices:

• ✅ Keine CSS-Animationen oder Tailwind-Animations-Klassen
• ✅ ThreeCanvas mit width und height props
• ✅ Keine useFrame() - nur useCurrentFrame()
• ✅ layout="none" für Sequences innerhalb ThreeCanvas
• ✅ Proper premounting für alle Sequences
• ✅ Spring-Konfigurationen für natürliche Bewegung
• ✅ Alle Animationen frame-basiert

Performance

• Alle Assets optimiert
• 3D-Elemente verwenden niedrige Polygon-Counts wo möglich
• Bitcoin-Effekt mit moderater Partikel-Anzahl (15)
• Wiederverwendbare AnimatedLogo Komponente
• Effiziente Re-Renders durch proper React-Patterns

Änderungen zur vorherigen Version

✨ Neu hinzugefügt:

• AnimatedLogo Komponente mit EINUNDZWANZIG Square Logo
• Fancy 3D-Ring-Animation um Logos
• Glüh-Effekte und Partikel
• Floating Animation für Logos

🔄 Ersetzt:

• ❌ 3D Keyboard Keys → ✅ AnimatedLogo
• ❌ 3D Checkmark Torus → ✅ AnimatedLogo
• ❌ Generic 3D shapes → ✅ Brand-specific Logo

⏱️ Verlängert:

• OutroScene: 4 Sekunden → 10 Sekunden (2.5x länger!)
• Gesamtdauer: 32 Sekunden → 38 Sekunden

📐 Vergrößert:

• URL in Outro: text-lg (18px) → text-7xl (72px) (4x größer!)
• URL Container mit Border und Glow-Effekt
• URL Pulsations-Animation für Aufmerksamkeit