Fähigkeiten-Showcase
Erstelle ein animiertes Fähigkeiten-Showcase-Video (1080x1080, 30fps, ~48s) sowie einen 7-teiligen X-Thread, der Fähigkeitencluster konkreten Nutzenwerten zuordnet.
Schnellstart
cd skills-showcase
npm install
npx remotion studio # Vorschau im Browser
npx remotion render SkillsShowcase out/skills-showcase.mp4
npx remotion render SkillsShowcase out/skills-showcase.gif --every-nth-frame=3
Ausgabeartefakte
out/skills-showcase.mp4— Primärer X-Upload (H.264, ~4,7 MB)out/skills-showcase.gif— Fallback/Vorschau (~7 MB)thread.md— 7-teiliger X-Thread als Textvorlage
Architektur
src/
├── index.ts # registerRoot-Einstiegspunkt
├── Root.tsx # Kompositionsregistrierung (1080×1080, 30fps, 1440 Frames)
├── SkillsShowcase.tsx # Master-Zeitachse mit <Series>
├── data/skills.ts # Typisierter Datensatz: Kategorien, Fähigkeiten, abgeleitete Aggregate
├── scenes/
│ ├── Intro.tsx # Titel + Untertitel + Statistik-Pillen (4s)
│ ├── CategorySection.tsx # Kategoriebezeichnung + versetzte Fähigkeits-Chips (je 2,67s)
│ └── Outro.tsx # Zusammenfassungskennzahl + Slogan + Handlungsaufforderung (4s)
└── components/
└── SkillChip.tsx # Wiederverwendbarer animierter Badge mit Federeingang
Datenmodell
Bearbeite src/data/skills.ts, um Fähigkeiten hinzuzufügen oder zu entfernen. Das Video rendert deterministisch aus diesem Datensatz.
- Kategorie:
{ id, label, color, order } - Fähigkeit:
{ slug, categoryId, shortDescription } - Abgeleitet:
totalSkills,totalCategories,skillsByCategory
Animationskonventionen
Alle Animationen verwenden ausschließlich Remotion-Frame-basierte Muster:
useCurrentFrame()+useVideoConfig()für Frame/FPSspring()für Eingänge (damping: 200 für weich, damping: 20 + stiffness: 200 für knackig)interpolate()mit Clamp für Deckkraft und Translation- Keine CSS-Übergänge oder Tailwind-Animation-Hilfsmittel
Zeitachsen-Taktung
| Szene | Frames | Dauer |
|---|---|---|
| Intro | 120 | 4,0 s |
| 15 Kategorien × 80 | 1200 | 40,0 s |
| Outro | 120 | 4,0 s |
| Gesamt | 1440 | 48,0 s |
Anpassung
- Kategorie hinzufügen: Zum
categories-Array insrc/data/skills.tshinzufügen,Root.tsx-Dauer aktualisieren - Farben ändern: Jede Kategorie hat einen
color-Hexwert im Datensatz - Taktung anpassen:
CATEGORY_DURATIONinSkillsShowcase.tsxändern - Thread-Text:
thread.mddirekt bearbeiten
Thread-Strategie
Siehe thread.md für den vollständigen 7-teiligen Thread. Aufbau:
- Haken + Video-Anhang
- Warum Fähigkeiten Einmal-Prompts schlagen
- Cluster „Bewusstsein & Gedächtnis“
- Cluster „Forschung & Analyse“
- Full-Stack-Implementierungsabdeckung
- Nischen-Spezialfähigkeiten mit hohem Signal
- Handlungsaufforderung und Diskussionsanregung