HyperFrames Studio

Was macht HyperFrames Studio?

Du produzierst einen von drei HyperFrames-Outputs: einen horizontalen Hook (Intro), einen vertikalen Shorts oder ein 16:9-Slidedeck. Alle drei teilen sich dieselbe Engine, Schriftarten, Brand-Derivation-Formel und Render-Voreinstellungen – nur das Seitenverhältnis, Untertitel und Rahmung unterscheiden sich. Bestimme zuerst den Modus, kopiere dann den passenden Starter aus dem Paket und bearbeite ihn. Keine Komposition auf leerem Blatt.

Die gesamte Engine befindet sich in references/engine.md; Modusunterschiede in references/{hook,shorts,slidedeck}.md; Transkription und Re-Encode in references/transcription.md. Starter-Templates liegen unter assets/templates/<mode>/ – sie sind mit einer neutralen Indigo-Placeholder-Palette (--brand:#6366f1) ausgeliefert und werden mit der Benutzerfarbe neu eingefärbt.

Schritt 0 – Modus bestimmen (Q0, erster Treffer gewinnt)

1. Expliziter Modus in Anfrage/Argumenten – mod:hook|shorts|slidedeck oder klarer Ausdruck (Intro/Hook → Hook; Shorts/Vertikal/Reels → Shorts; Slidedeck/Präsentation/Folien → Slidedeck). Festlegen.
2. Ordnername – Wenn der aktuelle/Zielordner auf -hook / -shorts / -slidedeck endet, dieser Modus.
3. Seitenverhältnis-Absicht – „horizontaler Einstieg“ → Hook; „vertikal“ → Shorts; „Präsentation/Deck“ → Slidedeck.
4. Trifft nichts zu – Mit AskUserQuestion fragen: „Was produzieren wir? Hook (horizontales 16:9-Intro) / Shorts (vertikales 9:16) / Slidedeck (16:9-Präsentation)“.

Sobald der Modus klar ist, lies die entsprechende references/<mode>.md und folge deren Schritten.

Stehende Regeln – bei jedem Durchlauf baked-in, nicht fragen, nicht überspringen

1. Schriftarten selbst hosten – Manrope + JetBrains Mono, 4 lokale fonts/*.woff2, Türkisches Unicode-Range. Niemals CDN/eingebaute Schriftarten verwenden (sonst fehlen türkische Zeichen). Jeder Starter bringt diese + OFL.txt mit; fonts/ zusammen mit der Komposition kopieren.
2. Nur lokale assets/ – niemals ../assets oder übergeordnete Pfade (Preview/Render haben keinen Zugriff auf übergeordnete Verzeichnisse, Medien bleiben leer).
3. Dunkles Theme + einzelne Markenfarbe – Nahe-schwarzer Hintergrund, nahe-weißer Text; jede Akzentfarbe wird aus --brand abgeleitet (engine.md §4).
4. Transkript kommt vom Benutzer – Bei Hook/Shorts ist das Transkript die Eingabe des Benutzers. Wurde es nicht mit der Anfrage eingefügt und existiert keine transcript.txt im eigenen Projektordner, dann stoppe und fordere den Benutzer auf – noch bevor du die Komposition aufbaust und zur AskUserQuestion übergehst. Nimm kein Transkript aus einem anderen Ordner/Projekt als zugehörig an (selbst bei gleichem Namen) und führe nicht eigenständig transcribe aus. Nur wenn der Benutzer explizit „Du extrahierst es“ sagt, folge der transcription.md. Details: transcription.md §Transkript holen.
5. Rohclips zuerst neu encodieren – node scripts/reencode.mjs <klip>.mp4 (dichte Keyframes); beziehe dich auf die neu encodierte -src.mp4, nicht auf die Rohdatei (transcription.md).
6. Deterministische Timeline – gsap.timeline({paused:true}), window.__timelines["main"]=tl, Positionen in exakten Sekunden; kein Math.random/Date.now/repeat:-1/setTimeout (engine.md §8, §11).
7. Kein Sponsor-Logo – kein festes Ecklogo; das Markenzeichen ist eine zeitgesteuerte Animation (oder optional ein zentrierter Topmark).
8. Render nur für Hook + Shorts – Diese beiden Modi liefern eine MP4; Voreinstellung (überschreibbar): 1080p · 60fps · 16 Mbps · Qualität high, gepinnt auf [email protected]. Slidedeck wird NICHT gerendert und danach auch nicht gefragt – das Deck wird als presentation/presentation.html ausgeliefert (Ausnahme: Benutzer verlangt explizit ein Video; Regel: slidedeck.md).
9. Volle Quellabdeckung – data-duration = tatsächliche Clip-/Inhaltsdauer; nach dem Render bei Hook/Shorts mit ffprobe prüfen, beim Deck die Dauer mit N × Folie-Arithmetik bestätigen.

Schritt 1 – Echte Auswahl einmal fragen (AskUserQuestion, Türkisch)

Filtere alle Fragen, die bereits durch Argumente oder Schritt 0 gelöst sind. Dann fasse in einem einzigen AskUserQuestion-Aufruf die gemeinsamen Fragen mit 2–3 modusspezifischen Fragen zusammen (Round-Trip reduzieren). Option 1 ist immer der empfohlene/erkannte Wert. Bleiben keine Fragen, überspringe den Aufruf und gebe die gelösten Werte in einem einzeiligen türkischen Vorwort an.

Gemeinsame Fragen (jeder Modus):

• Farbe (Kopfzeile „Renk“) – Option 1 = erkannte Hex „(önerilen)“ falls vorhanden; sonst neutraler Standard. 2–3 neutrale Beispielpaletten + Andere = eigene Hex. Thema bleibt Dunkel.
• Template-Quelle (Kopfzeile „Şablon“) – „Paketteki hazır {mode} starter'ı kullan (önerilen)“ · falls ein früheres -{mode}-Projekt im Workspace erkannt wird: „Kendi önceki -{mode} projemi klonla“.

Modusspezifische Fragen werden aus references/<mode>.md ergänzt (Hook: Demo/Logos/Abspann · Shorts: Marke/Abspann/Thumbnail · Slidedeck: Folien/Tempo).

Nie fragen: Im Slidedeck-Modus „Soll ich rendern / MP4 erzeugen / welche Ausgaben produzieren“. Ein Deck ist eine HTML-Präsentation; presentation/presentation.html wird immer erzeugt, Render kommt nicht in Frage.

Unbedingt fragen: Bei Hook/Shorts, wenn kein Transkript vorliegt (stehende Regel 4). Dies ist eine vor AskUserQuestion gestellte direkte Aufforderung – „Kannst du das Transkript dieses Clips im Format [MM.SS - MM.SS] teilen?“ – denn ohne Transkript werden Caption-{in,out}-Werte, HOOK_END/CLOSE und Szenengrenzen erfunden.

Schritt 2 – Aufbauen (handoff)

1. Kopiere assets/templates/<mode>/ in das Zielprojekt (index.html, fonts/, hyperframes.json, meta.json, package.json, assets/; beim Deck zusätzlich presentation/ – immer, ohne Nachfrage). Aktualisiere den Namen in meta.json/package.json.
2. Befolge die Build-Schritte aus references/<mode>.md, um index.html zu verarbeiten: Medien einbinden, data-duration auf die tatsächliche Länge setzen, Palette anwenden, Szenen/Untertitel/Folien mit Inhalt füllen.
3. Validieren: npx --yes [email protected] lint → inspect (beim Deck zusätzlich validate) → preview. Extrahiere bei Schlüsselbeats Frames und mache eine visuelle QA (Achtung auf Fallstricke in engine.md §11: Literal-Positionen, keine Medien-Tags im Kommentar, WCAG-Falschpositive, einzelne Root-Composition).
4. Ausliefern – je nach Modus:
   • hook / shorts → render --quality high --fps 60 --video-bitrate 16M --output "renders/<name>.mp4", dann mit ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 renders/<name>.mp4 die Dauer bestätigen; einen mittleren Frame + Audiostream prüfen. Pfad und Dauer sauber melden.
   • slidedeck → Kein Render. Liefere presentation/presentation.html aus, gib die zweizeilige Ausgabetabelle aus slidedeck.md an und erkläre, warum index.html nicht per Doppelklick geöffnet wird. Render weder durchführen noch vorschlagen.

Hinweise zur Ersteinrichtung

• Node.js + npx und ffmpeg im PATH erforderlich. Die HyperFrames-Toolchain wird on-demand über npx geladen.
• hyperframes transcribe lädt beim ersten Aufruf das Whisper-Modell herunter (groß, dauert Minuten); für Türkisch nicht .en sondern medium/large-v3 verwenden (transcription.md).
• Schriftarten unter SIL OFL 1.1 (fonts/OFL.txt); Skill-Code MIT.
• Für CLI/GSAP-Details der Engine auf den base hyperframes-Skill verweisen – hier nicht wiederholen.