EvovexAI/EvoFlow

Der allgemeine Workflow zur Erstellung benutzerdefinierter HyperFrames-Videokompositionen in beliebiger Länge oder jedem Format – längere oder mehrteilige Stücke, Marken-/Sizzle-Reels, Montagen, Titelcards, statische Loops und freie Kompositionen. Eingabe- und längenunabhängig. Falls ein spezialisierter Workflow eindeutig zur Eingabe passt – ein vermarktetes Produkt, eine Website, eine Themen-Erklärung, ein GitHub-PR, vorhandenes Filmmaterial, eine kurze Bewegungsgrafik oder ein Remotion-Port –, bevorzugen Sie diesen (siehe /Hyperframes). Verwenden Sie diesen nur als allgemeinen Fallback, wenn keiner passt.

Was ist EvoFlow?

EvoFlow ist ein generischer Fallback-Workflow innerhalb des HyperFrames-Ökosystems, der speziell für die Erstellung benutzerdefinierter Videokompositionen entwickelt wurde, die nicht in spezialisierte Workflows wie Produkt-Launch-Videos, Erklärvideos oder Bewegungsgrafiken passen. Es ist eingabe- und längenagnostisch, d. h. es kann alles verarbeiten, von einer einfachen Titelcard bis hin zu mehrteiligen Montagen oder Sizzle-Reels. Der Workflow betont die Etablierung einer visuellen Identität unter Verwendung der kreativen Referenzen von HyperFrames, die Erweiterung von Eingabeaufforderungen für Konsistenz in mehrteiligen Kompositionen und eine strukturierte Planungsphase, die das Layout vor der Animation priorisiert, um Überlappungen und Layout-Fehler zu vermeiden. Er delegiert spezifische Aufgaben – wie kinetische Typografie, Audio-Erstellung oder Datenanimationen – an dedizierte HyperFrames-Fähigkeiten und bietet eine zentrale Anlaufstelle für Audio (TTS, BGM, SFX) über ein einziges Skript. EvoFlow ist ideal für Szenarien, in denen der Benutzer die vollständige kreative Kontrolle über eine Komposition benötigt, die in kein vorgegebenes Schema passt. Es wird auf Plattformen wie Claude Code, Codex und Cursor unterstützt, die auf HyperFrames-Fähigkeiten zugreifen können.

Funktioniert mit~Claude Code~Codex CLI✓Cursor

npx skills add https://github.com/EvovexAI/EvoFlow/tree/HEAD/skills/public/general-video

Dokumentation

media-use: Bevor Sie Audio/Quellen abrufen, rufen Sie /media-use auf, um BGM/SFX/Bilder aus dem HeyGen-Katalog zu beziehen. Führen Sie zuerst --adopt aus, um vorhandene Assets zu registrieren. Siehe /media-use-Fähigkeit.

general-video — Allgemeiner Video-Workflow

Bestätigen Sie die Route, bevor Sie bauen. Dies ist der Fallback für die Erstellung benutzerdefinierter Kompositionen. Wenn die Eingabe eindeutig zu einem spezialisierten Workflow passt, bevorzugen Sie diesen: vermarktetes Produkt → /product-launch-video; allgemeine Website → /general-video; Themen-Erklärung → /faceless-explainer; GitHub-PR → /pr-to-video; vorhandenes Filmmaterial → /embedded-captions · /talking-head-recut; kurze unkommentierte Bewegungsgrafik → /motion-graphics; Remotion-Port → /remotion-to-hyperframes. Nicht im Rahmen: Live-/Renderzeit-Daten, NLE-ähnliche Bearbeitung eines fertigen Videos oder die Produktion von Filmmaterial, das HyperFrames nicht erfassen kann. Unsicher? Lesen Sie /hyperframes zuerst.

Bauen Sie genau das, was verlangt wurde. Eine Titelcard ist eine Titelcard – nicht eine Titelcard + drei unterstützende Szenen + Hintergrundmusik + Untertitel. Wenn zusätzliche Szenen oder Elemente das Stück tatsächlich verbessern würden, schlagen Sie sie vor; fügen Sie sie nicht stillschweigend hinzu. Bei kleinen Änderungen (eine Farbe korrigieren, eine Dauer anpassen, ein Element hinzufügen) überspringen Sie die Planungsschritte und gehen Sie direkt zum Bau über.

Vorgehen

Entdeckung – nur bei offenen Anfragen

Bei vagen, explorativen Anfragen ("etwas für unsere Marke machen", "ein cooler Intro") – verstehen Sie die Absicht, bevor Sie Farben auswählen:

Zielgruppe – wer schaut zu? Entwickler / Führungskräfte / allgemeine Verbraucher?
Plattform – wo wird es abgespielt? Soziales (15s) / Website-Hero / Produktdemo / intern?
Priorität – was ist am wichtigsten? Bewegungsqualität / Inhaltsgenauigkeit / Markentreue / Geschwindigkeit?
Varianten – ein bester Versuch oder 2–3 sinnvoll unterschiedliche Optionen (unterschiedliches Tempo, Energie oder Struktur – nicht nur Farbwechsel)?

Bei spezifischen Anfragen ("Titelcard hinzufügen", "Timing in Szene 3 korrigieren") überspringen Sie die Entdeckung.

Schritt 1 – Designsystem → `hyperframes-creative`

Legen Sie zuerst die visuelle Identität fest. Wenn das Projekt eine Design-Spezifikation hat, lesen Sie sie (Rangfolge frame.md → design.md → DESIGN.md; behandeln Sie sie als Markenwahrheit – exakte Farben, Schriften, Einschränkungen).

Wenn keine Spezifikation existiert, MÜSSEN Sie SOWOHL hyperframes-creative/references/house-style.md ALS AUCH hyperframes-creative/references/video-composition.md lesen, bevor Sie eine Farbe oder Schriftart auswählen. house-style.md gibt den Einstieg "Interpretiere die Eingabeaufforderung / generiere echte Inhalte", die Liste der faulen Standards und das Schichtrezept; video-composition.md gibt die dichte / skalierte / Vordergrunddetailierung (Datenbalken, Registriermarken, Monospace-Metadaten, "8-10 Elemente, zwei die der Benutzer nicht verlangt hat"), die "produziert" von "generiert" unterscheidet. Nur eines zu lesen ist der häufigste Fehler – video-composition.md ist das, was Agenten überspringen, und genau das verhindert flache, zentrierte, webseitenartige Ausgabe. Erfinden Sie keine eigene Palette und überspringen Sie diese nicht; der Einstieg in hyperframes-creative ist hier obligatorisch, kein optionaler Zweig. Ziehen Sie von dort auch einen benannten Stil / eine Stimmung → references/visual-styles.md oder den interaktiven Picker → references/design-picker.md nach Bedarf. Die Spezifikation / der Stil definiert die Marke, nicht die Kompositionsregeln.

Finden Sie den Blickwinkel (vages Briefing, keine Spezifikation): Bevor Sie Farben auswählen, schreiben Sie EINEN Satz – was ruft dieser Name / dieses Wort / dieses Thema hervor und welche visuelle Welt (Metapher, Umgebung, Instrument, Motiv) drückt es aus? Z.B. ein Cybersicherheitstool → Tresortüren / Perimeterscanlinien / Schlosszylinder; eine Meditations-App → Gezeiten, Atem, langsamer Lichtblüte. Lesen Sie die Bedeutung des Subjekts, nicht nur seine Buchstaben; wählen Sie einen konkreten Blickwinkel über eine wörtliche Neugestaltung. Dies ist der günstige Ersatz für die Erweiterung der Eingabeaufforderung (Schritt 2) bei Ein-Szene-Stücken, bei denen die Erweiterung korrekterweise übersprungen wird – und es ist der Unterschied zwischen einem gestalteten Konzept und einem generischen Logo auf einem Farbverlauf.

Schritt 2 – Erweiterung der Eingabeaufforderung → `hyperframes-creative`

Führen Sie dies für jede mehrteilige Komposition aus (bei Ein-Szene-Stücken und trivialen Bearbeitungen überspringen). Verankern Sie die Anfrage anhand der Design-Spezifikation + des Hausstils in einem konsistenten Zwischenprodukt, das die nachgelagerte Arbeit auf die gleiche Weise liest. Siehe hyperframes-creative/references/prompt-expansion.md.

Schritt 3 – Plan

Denken Sie auf hohem Niveau, bevor Sie HTML schreiben:

Was – das Zuschauererlebnis: Erzählbogen, Schlüsselmomente, emotionale Schläge.
Struktur – wie viele Kompositionen, Unterkomposition vs. Inline, welche Spuren tragen Video / Audio / Overlays / Untertitel. Für die Entscheidung monolithische Einzeldatei vs. modulare Unterkompositionen siehe hyperframes-core/references/composition-patterns.md § Zwei Architekturen (Faustregel: ≥3 harte Szenenschnitte oder jede wiederholte Szene → modularisieren; ein kurzes Ein-Szene-Stück bleibt eine Datei).
Rhythmus – benennen Sie das Muster vor der Implementierung (z.B. schnell-schnell-LANGSAM-SHADER-halt); siehe hyperframes-creative/references/beat-direction.md.
Timing – welche Clips steuern die Dauer, wo landen Übergänge, das Tempo.
Layout – bauen Sie zuerst den Endzustand (siehe unten).
Animieren – fügen Sie dann Bewegung über hyperframes-animation hinzu.

Layout vor Animation

Positionieren Sie jedes Element dort, wo es sich in seinem sichtbarsten Moment befindet – vollständig eingetreten, korrekt platziert, noch nicht ausgetreten. Schreiben Sie dies zuerst als statisches HTML + CSS. Noch kein GSAP.

Warum: Wenn Sie Elemente in ihrem animierten Startzustand positionieren (außerhalb des Bildschirms, skaliert auf 0, Deckkraft 0) und zu dem Ort tweenen, von dem Sie denken, dass sie landen, raten Sie das endgültige Layout – Überlappungen bleiben bis zum Rendern unsichtbar. Bauen Sie zuerst den Endzustand, dann sehen und beheben Sie Layout-Probleme, bevor Sie Bewegung hinzufügen.

Identifizieren Sie den Helden-Frame für jede Szene – den Moment, in dem die meisten Elemente gleichzeitig sichtbar sind. Das ist das Layout, das Sie bauen.
Schreiben Sie statisches CSS für diesen Frame. Der Inhaltscontainer muss die Szene mit Padding füllen, nicht mit absoluten Offsets:

.scene-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 120px 160px; /* padding positioniert Inhalt; füllt jede Szenengröße */
  gap: 24px;
  box-sizing: border-box;
}

Verwenden Sie niemals position: absolute; top: Npx für einen Inhaltscontainer – er läuft über, wenn der Inhalt höher als der Platz ist. Reservieren Sie absolute Positionierung für dekorative Elemente.

⚠ Das width/height: 100% oben funktioniert nur, wenn jeder Vorfahre eine festgelegte Höhe hat. Das Wurzel-<div data-composition-id> und jeder Wrapper zwischen ihm und .scene-content müssen dimensioniert sein (position: relative; width: 1920px; height: 1080px beim Wurzelelement – siehe hyperframes-core → "Root muss dimensioniert sein"). Überspringen Sie dies und der Flex-Container kollabiert auf ~0, Inhalt stapelt sich in der oberen linken Ecke und das erste Zeichen wird bei x=0 abgeschnitten – während lint/inspect immer noch 0 Probleme melden. Und behalten Sie immer das padding (≥80px) auf .scene-content bei: Es ist der titelsichere Rand. Ersetzen Sie es niemals durch bloßes gap.

Fügen Sie Eintritte hinzu – animieren Sie VON außerhalb des Bildschirms / unsichtbar ZU der CSS-Position mit gsap.from() (in Unterkompositionen bevorzugen Sie gsap.fromTo(), damit der Startzustand explizit ist; siehe hyperframes-core/references/sub-compositions.md). Die CSS-Position ist die Grundwahrheit; der Tween ist die Reise dorthin.
Austritte werden durch Übergänge behandelt – gemäß den Szenenübergangsregeln in hyperframes-animation/transitions/ animiert nur die letzte Szene Elemente heraus; zwischen Szenen IST der Übergang der Austritt.

Gemeinsamer Raum über die Zeit: Wenn Element A austritt, bevor Element B im selben Bereich eintritt, benötigen beide dennoch korrekte CSS-Positionen für ihre jeweiligen Helden-Frames – die zeitliche Anordnung verhindert ihr gleichzeitiges Vorhandensein, und der Layout-Schritt erfasst versehentliche Überlappungen. Geschichtete Leuchten/Schatten und z-gestapelte Tiefe sind beabsichtigte Überlappung; der Schritt dient zum Erfassen unbeabsichtigter Kollisionen (zwei Überschriften übereinander, Inhalt, der aus dem Bild läuft).

Bauen – an die Domain-Fähigkeiten delegieren

Dies bildet die vollständige Oberfläche der Fähigkeit (siehe die description) auf ihre Referenzen ab – nicht abschließend; wenn eine Absicht nicht aufgeführt ist, leiten Sie über hyperframes-creative (Look/Konzept), hyperframes-animation (Bewegung), hyperframes-core (Vertrag), hyperframes-media (Audio/Untertitel). Die erste Zeile ist ADDITIV – lesen Sie sie UND Ihre Absichtszeile, nicht entweder oder.

Bauen…	Zuerst lesen (in Reihenfolge)
IMMER – jedes nicht-triviale Stück, zusätzlich zu Ihrer Absichtszeile unten	`hyperframes-creative/references/house-style.md` + `references/video-composition.md` (auch in Schritt 1 / HARD-GATE geprüft; die "produzierte, nicht generierte" Vordergrunddetailierung)
Kinetische Typografie / textlastig	`hyperframes-animation/techniques.md` (kinetischer Typ) + `adapters/gsap-easing-and-stagger.md` + `rules/kinetic-beat-slam.md`
Titelcard / unteres Drittel / Overlay / PiP / Text-hinter-Subjekt	`hyperframes-creative/references/composition-patterns.md` + (für den zentrierten/dimensionierten Frame) `hyperframes-core` → "Root muss dimensioniert sein"
Logo / Markenzeichen-Enthüllung	`hyperframes-animation/rules/svg-path-draw.md` (Aufzeichnen) + `rules/3d-text-depth-layers.md` + `rules/scale-swap-transition.md`
Daten / Statistiken / Zahlen	`hyperframes-animation/rules/counting-dynamic-scale.md` + `rules/stat-bars-and-fills.md` + `hyperframes-creative/references/data-in-motion.md`
Produkt / App / UI Demo	`hyperframes-animation/rules/3d-page-scroll.md` + `rules/cursor-click-ripple.md` + `rules/press-release-spring.md`
Audio-reaktiv / musikgesteuert	`hyperframes-creative/references/audio-reactive.md` (Bänder vorab extrahieren; Bewegung zuordnen)
Kommentiert / Voiceover / Musik / SFX / Untertitel	`hyperframes-media` → die gemeinsame Audio-Engine `scripts/audio.mjs` (ein Aufruf = TTS + BGM + SFX → `audio_meta.json`); Untertitel-Authoring + Asset-Platzierung über `hyperframes-core`. Siehe Audio unten.
Mehrere Szenen / Übergänge	`hyperframes-animation/transitions/overview.md` dann `transitions/catalog.md` (Sie sind nach der Übersicht nicht fertig – das GSAP-Rezept befindet sich im Katalog)
Modular / Unterkompositionen	`hyperframes-core/references/composition-patterns.md` + `references/sub-compositions.md`

Audio: eine Engine (TTS · BGM · SFX)

Nur wenn das Stück danach verlangt (gemäß "baue genau das, was verlangt wurde" – keine Hintergrundmusik auf einer Titelcard). Bauen Sie kein TTS von Hand oder beziehen Sie eine Kopie: Schreiben Sie ein neutrales audio_request.json und rufen Sie die gemeinsame Engine in hyperframes-media auf. Sie degradiert automatisch bei einem Schalter – HeyGen-Anmeldedaten vorhanden → HeyGen TTS + Musik/SFX Abruf; abwesend → ElevenLabs/Kokoro TTS, Lyria/MusicGen BGM Generierung und die gebündelte SFX-Bibliothek. Vollständige Flag-Liste + Anfrage/Meta-Schema: der Kopfkommentar von hyperframes-media/scripts/audio.mjs.

// audio_request.json — eine Zeile pro kommentiertem Segment; `id` gehört Ihnen (verbindet audio_meta zurück)
{
  "lines": [
    { "id": "s1", "text": "Ihre Eröffnungszeile.", "sfx": ["whoosh"] },
    { "id": "s2", "text": "Der nächste Schlag." },
  ],
  "bgm": { "query": "calm cinematic underscore" }, // "mode" weglassen → auto (abrufen wenn HeyGen, sonst generieren); "none" zum Deaktivieren
}

# <MEDIA_DIR> = das installierte hyperframes-media-Fähigkeitsverzeichnis (Geschwister dieser Fähigkeit)
node <MEDIA_DIR>/scripts/audio.mjs --request ./audio_request.json --hyperframes . --out ./audio_meta.json

Lesen Sie dann audio_meta.json: mounten Sie jedes voices[].path + (bgm.path, sfx[]) als <audio>-Spuren und verwenden Sie voices[].words für Untertitel, alles gemäß hyperframes-core (Audiospuren + Untertitel-Authoring). Wenn BGM den Generierungspfad genommen hat (bgm_pending: true), führen Sie vor dem finalen Rendern hyperframes-media/scripts/wait-bgm.mjs aus.

Ausgabe-Checkliste → `hyperframes-cli`

…

[gekürzt für Übersetzung]