🗑️ Remove unused assets: delete obsolete SVGs, MP3 files, README documentation, and public assets from the videos/ directory.

This commit is contained in:
HolgerHatGarKeineNode
2026-01-24 12:34:56 +01:00
parent fe92418dbb
commit 756c9d4c70
24 changed files with 360 additions and 36 deletions

2
videos/.gitignore vendored
View File

@@ -5,3 +5,5 @@ dist
# Ignore the output video from Git but not videos you import into src/.
out
public

358
videos/PRD.md Normal file
View File

@@ -0,0 +1,358 @@
# PRD: Einundzwanzig Portal - Cinematic Presentation Video
## Executive Summary
**Produkt:** 90-Sekunden kinoreifes Präsentationsvideo des Einundzwanzig Portals
**Technologie:** Remotion 4.0.409 + React Three Fiber + Tailwind CSS v4
**Auflösung:** 1920x1080 (Desktop) + 1080x1920 (Mobile)
**Ziel:** Das Portal als lebendige, wachsende Bitcoin-Community-Infrastruktur präsentieren
---
## Vision
Das Video zeigt nicht einfach eine Website — es **enthüllt** eine Bewegung. Jede Animation verstärkt die Botschaft: Die deutschsprachige Bitcoin-Community ist organisiert, aktiv und wächst. Das Portal ist das Nervenzentrum.
---
## Verfügbare Assets
### Logos
- `public/einundzwanzig-square-inverted.svg` — Hauptlogo
- `public/einundzwanzig-horizontal-inverted.svg` — Horizontal Logo
- `public/bitcoin-logo.svg` — Bitcoin Symbol
- `public/einundzwanzig-wallpaper.png` — Background
### Meetup-Logos (100+)
- `public/logos/EinundzwanzigKempten.png`
- `public/logos/EinundzwanzigFrankfurtAmMain.png`
- `public/logos/EinundzwanzigSaarland.png`
- `public/logos/EinundzwanzigDarmstadt.png`
- `public/logos/EinundzwanzigTrier.png`
- ... (vollständige Liste in `public/logos/`)
### Audio
- `public/music/background-music.mp3`
- `public/sfx/` — 17 Sound Effects (logo-whoosh, typing, card-slide, etc.)
### Bestehende Komponenten (wiederverwendbar)
- `src/components/AnimatedLogo.tsx` — 3D Logo mit Glow
- `src/components/BitcoinEffect.tsx` — Fallende Bitcoin-Partikel
- `src/components/AudioManager.tsx` — Audio-Orchestrierung
---
## Szenen-Übersicht
| # | Szene | Dauer | Frames | Fokus |
|---|-------|-------|--------|-------|
| 1 | Logo Reveal | 6s | 0-180 | Brand Impact |
| 2 | Portal Title | 4s | 180-300 | Erwartung setzen |
| 3 | Dashboard Overview | 12s | 300-660 | Full Picture |
| 4 | Meine Meetups | 12s | 660-1020 | Persönliche Verbindung |
| 5 | Top Länder | 12s | 1020-1380 | Geografische Reichweite |
| 6 | Top Meetups | 10s | 1380-1680 | Community Chapters |
| 7 | Activity Feed | 10s | 1680-1980 | Live Pulse |
| 8 | Call to Action | 12s | 1980-2340 | Conversion |
| 9 | Outro | 12s | 2340-2700 | Brand Cement |
**Total: 90 Sekunden = 2700 Frames @ 30fps**
---
## Milestones
### Milestone 1: Foundation Setup
**Ziel:** Projektstruktur und Basis-Komponenten
**Deliverables:**
- [ ] Ordnerstruktur `src/scenes/portal/` erstellen
- [ ] Ordnerstruktur `src/components/portal/` erstellen
- [ ] `PortalPresentation.tsx` Hauptkomposition (Skeleton)
- [ ] Root.tsx mit neuen Compositions aktualisieren
- [ ] Basis-Test: Leere Composition rendert ohne Fehler
**Verifikation:** `npm run dev` → "PortalPresentation" auswählbar, schwarzer Bildschirm
---
### Milestone 2: Reusable UI Components
**Ziel:** Dashboard-Elemente als wiederverwendbare Komponenten
**Deliverables:**
- [ ] `StatsCounter.tsx` — Animierte Zahlen (0 → 204)
- [ ] `SparklineChart.tsx` — SVG Linien-Animation
- [ ] `MeetupCard.tsx` — Meetup-Karte mit Logo, Name, Location
- [ ] `CountryBar.tsx` — Land + Flag + User-Count + Bar
- [ ] `ActivityItem.tsx` — Aktivitäts-Feed Eintrag
- [ ] `DashboardSidebar.tsx` — Komplette Sidebar Recreation
**Verifikation:** Jede Komponente einzeln in einer Test-Composition sichtbar
---
### Milestone 3: Scene 1+2 — Intro & Title
**Ziel:** Kinoqualität Einstieg
**Deliverables:**
- [ ] `PortalIntroScene.tsx` — Logo Reveal (6s)
- AnimatedLogo von 0 auf 100% mit Particles
- Wallpaper Background mit Zoom
- Audio: logo-whoosh → logo-reveal
- [ ] `PortalTitleScene.tsx` — Title Card (4s)
- "EINUNDZWANZIG PORTAL" Typing-Animation
- Subtitle Fade-in
- Audio: typing → ui-appear
**Verifikation:** Frame 0-300 zeigt Logo-Animation + Titel
---
### Milestone 4: Scene 3 — Dashboard Overview
**Ziel:** Das vollständige Dashboard erscheint
**Deliverables:**
- [ ] `DashboardOverviewScene.tsx` (12s)
- 3D Perspective Entrance (von oben, kippt zu flat)
- Sidebar slides in (spring, von links)
- Header animiert ein
- Content Cards staggered reveal (5 Frames Delay)
- Sidebar Badges zählen hoch (Meetups: 204, etc.)
- Audio: card-slide (mehrfach, gestaffelt)
**Verifikation:** Frame 300-660 zeigt komplettes Dashboard
---
### Milestone 5: Scene 4 — Meine Meetups
**Ziel:** Persönliche Verbindung zum Nutzer
**Deliverables:**
- [ ] `MeetupShowcaseScene.tsx` (12s)
- Camera zoom in auf "Meine nächsten Meetup Termine"
- "Einundzwanzig Kempten" Karte hebt sich (3D Shadow)
- Echtes Logo: `EinundzwanzigKempten.png`
- Location + Datum animieren ein
- "Meine Meetups" Liste: Kempten, Memmingen, Friedrichshafen
- Action Buttons erscheinen
- Audio: slide-in, badge-appear
**Verifikation:** Frame 660-1020 zeigt Meetup-Details
---
### Milestone 6: Scene 5 — Top Länder
**Ziel:** Geografische Reichweite visualisieren
**Deliverables:**
- [ ] `CountryStatsScene.tsx` (12s)
- Smooth transition vom Dashboard
- Länder erscheinen sequentiell:
1. 🇩🇪 Germany — 458 User
2. 🇦🇹 Austria — 59 User
3. 🇨🇭 Switzerland — 34 User
4. 🇱🇺 Luxembourg — 8 User
5. 🇧🇬 Bulgaria — 7 User
6. 🇪🇸 Spain — 3 User
- Zahlen zählen hoch (StatsCounter)
- Progress Bars füllen sich (spring)
- SparklineCharts animieren
- Audio: success-chime pro Land
**Verifikation:** Frame 1020-1380 zeigt Länder-Statistiken
---
### Milestone 7: Scene 6 — Top Meetups
**Ziel:** Lokale Chapters sind aktiv
**Deliverables:**
- [ ] `TopMeetupsScene.tsx` (10s)
- Top Meetups Liste animiert:
1. Einundzwanzig Saarland — 26 User
2. Einundzwanzig Frankfurt am Main — 26 User
3. Einundzwanzig Kempten — 20 User
4. Einundzwanzig Pfalz — 17 User
5. Einundzwanzig Trier — 15 User
- Echte Logos aus public/logos/
- SparklineCharts zeigen Wachstum
- Hervorhebung des führenden Meetups
- Audio: checkmark-pop sequentiell
**Verifikation:** Frame 1380-1680 zeigt Top Meetups
---
### Milestone 8: Scene 7 — Activity Feed
**Ziel:** Echtzeit Community-Puls
**Deliverables:**
- [ ] `ActivityFeedScene.tsx` (10s)
- "Aktivitäten" Spalte im Fokus
- Items sliden von rechts ein:
- "Neuer Termin" Badge bounces
- Meetup Name types out
- Timestamp fades in
- Stack-Effekt: Neue Items pushen alte nach unten
- Events aus Screenshot:
- Einundzwanzig Kempten (vor 13 Stunden)
- Einundzwanzig Darmstadt (vor 21 Stunden)
- Einundzwanzig Vulkaneifel (vor 2 Tagen)
- BitcoinWalk Würzburg (vor 2 Tagen)
- Audio: button-click pro Item
**Verifikation:** Frame 1680-1980 zeigt Activity Feed
---
### Milestone 9: Scene 8 — Call to Action
**Ziel:** Conversion
**Deliverables:**
- [ ] `CallToActionScene.tsx` (12s)
- Dashboard blurt + zoomt leicht raus
- Overlay erscheint mit Glassmorphism
- "Werde Teil der Community" — spring entrance
- URL types: `portal.einundzwanzig.space`
- URL pulst orange
- Optional: QR Code materializes
- EINUNDZWANZIG Logo center mit Glow
- Audio: success-fanfare
**Verifikation:** Frame 1980-2340 zeigt CTA
---
### Milestone 10: Scene 9 — Outro
**Ziel:** Brand Cement
**Deliverables:**
- [ ] `PortalOutroScene.tsx` (12s)
- Fade to wallpaper background
- Horizontal Logo fade in (center)
- BitcoinEffect particles
- "Einundzwanzig e.V." text
- Background music fade out (3s)
- Audio: final-chime
**Verifikation:** Frame 2340-2700 zeigt Outro
---
### Milestone 11: Audio Integration
**Ziel:** Vollständige Audio-Synchronisation
**Deliverables:**
- [ ] `PortalAudioManager.tsx` — Audio für alle Szenen
- Background Music: Frame 0-2700, fade in/out
- SFX Timeline synchronisiert mit Szenen
- [ ] Audio-Test: Volle Composition mit Sound
**Verifikation:** Audio spielt korrekt zu allen Animationen
---
### Milestone 12: Mobile Version
**Ziel:** 1080x1920 Portrait-Variante
**Deliverables:**
- [ ] `PortalPresentationMobile.tsx`
- [ ] Mobile Szenen-Adaptionen (Layout-Anpassungen)
- [ ] Mobile in Root.tsx registriert
**Verifikation:** Mobile Composition rendert korrekt
---
### Milestone 13: Polish & Final Render
**Ziel:** Produktionsreif
**Deliverables:**
- [ ] Timing Fine-Tuning aller Übergänge
- [ ] Frame-genaue Audio-Sync Überprüfung
- [ ] Test-Render: `npx remotion render PortalPresentation --frames=0-300`
- [ ] Full Render: `npx remotion render PortalPresentation`
- [ ] Mobile Render: `npx remotion render PortalPresentationMobile`
**Verifikation:** MP4 Dateien in `/out` ohne Fehler
---
## Technische Architektur
### Dateistruktur (Final)
```
src/
├── PortalPresentation.tsx # Desktop Composition
├── PortalPresentationMobile.tsx # Mobile Composition
├── components/
│ ├── AnimatedLogo.tsx # (existing)
│ ├── BitcoinEffect.tsx # (existing)
│ ├── AudioManager.tsx # (existing)
│ └── portal/
│ ├── StatsCounter.tsx
│ ├── SparklineChart.tsx
│ ├── MeetupCard.tsx
│ ├── CountryBar.tsx
│ ├── ActivityItem.tsx
│ └── DashboardSidebar.tsx
├── scenes/
│ ├── IntroScene.tsx # (existing)
│ └── portal/
│ ├── PortalIntroScene.tsx
│ ├── PortalTitleScene.tsx
│ ├── DashboardOverviewScene.tsx
│ ├── MeetupShowcaseScene.tsx
│ ├── CountryStatsScene.tsx
│ ├── TopMeetupsScene.tsx
│ ├── ActivityFeedScene.tsx
│ ├── CallToActionScene.tsx
│ └── PortalOutroScene.tsx
└── Root.tsx # +2 Compositions
```
### Animation Patterns
**Spring Configs (wiederverwendbar):**
```tsx
const SMOOTH = { damping: 200 }; // Sanft, kein Bounce
const SNAPPY = { damping: 20, stiffness: 200 }; // Schnell, minimal Bounce
const BOUNCY = { damping: 12 }; // Verspielt, Bounce
```
**Staggered Reveal:**
```tsx
const STAGGER_DELAY = 5; // Frames zwischen Items
items.map((item, i) => {
const itemSpring = spring({
frame: frame - (i * STAGGER_DELAY),
fps,
config: SNAPPY,
});
// ...
});
```
**3D Perspective Entrance:**
```tsx
const perspectiveX = interpolate(frame, [0, 60], [30, 0], { extrapolateRight: 'clamp' });
const zoom = interpolate(frame, [0, 60], [0.85, 1], { extrapolateRight: 'clamp' });
style={{
transform: `perspective(1000px) rotateX(${perspectiveX}deg) scale(${zoom})`,
}}
```
---
## Erfolgskriterien
1. **Technisch:** Alle Milestones abgeschlossen, keine Render-Fehler
2. **Visuell:** Jede Szene hat mindestens 2 aktive Animationen
3. **Audio:** Jeder Szenenübergang hat korrespondierenden Sound
4. **Performance:** Render-Zeit < 5 Minuten für Full HD
5. **Qualität:** Video wirkt professionell, nicht "zusammengestückelt"
---
## Risiken & Mitigations
| Risiko | Mitigation |
|--------|------------|
| Logo-Formate inkonsistent (jpg/png/svg) | Img-Komponente mit fallback handling |
| Performance bei vielen Animationen | Premounting für smooth transitions |
| Audio Sync drift | Frame-genaue Sequence-Platzierung |
| Mobile Layout bricht | Separate Scene-Varianten pro Format |
---
## Nächster Schritt
Nach Genehmigung dieser PRD:
1. Milestone 1 beginnen: Foundation Setup

View File

@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<circle cx="32" cy="32" r="32" fill="#f7931a"/>
<path fill="#fff" d="M46.1 27.4c.6-4.1-2.5-6.3-6.8-7.8l1.4-5.6-3.4-.8-1.4 5.4c-.9-.2-1.8-.4-2.7-.7l1.4-5.5-3.4-.8-1.4 5.6c-.7-.2-1.5-.4-2.2-.5l0 0-4.7-1.2-.9 3.6s2.5.6 2.5.6c1.4.3 1.6 1.2 1.6 1.9l-1.6 6.3c.1 0 .2 0 .3.1-.1 0-.2-.1-.3-.1l-2.2 9c-.2.4-.6 1.1-1.6.8 0 0-2.5-.6-2.5-.6l-1.7 3.9 4.4 1.1c.8.2 1.6.4 2.4.6l-1.4 5.7 3.4.8 1.4-5.6c.9.3 1.8.5 2.7.7l-1.4 5.6 3.4.8 1.4-5.7c5.8 1.1 10.2.7 12-4.6 1.5-4.2-.1-6.7-3.1-8.3 2.2-.5 3.9-2 4.3-5zm-7.7 10.8c-1.1 4.2-8.2 1.9-10.5 1.4l1.9-7.5c2.3.6 9.7 1.7 8.6 6.1zm1-10.9c-1 3.9-6.9 1.9-8.8 1.4l1.7-6.8c1.9.5 8.1 1.4 7.1 5.4z"/>
</svg>

Before

Width:  |  Height:  |  Size: 694 B

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 5.9 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 920 KiB

View File

@@ -1,8 +0,0 @@
# Background Music
Place your background music file here:
- `background-music.mp3`
Recommended: 40-60 seconds, loop-friendly, tech/crypto theme
See AUDIO_GUIDE.md for download sources and tips.

View File

@@ -1,22 +0,0 @@
# Sound Effects
Place the following sound effect files here:
## Required Files:
- 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
See AUDIO_GUIDE.md for detailed descriptions and download links.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.