hoodini/logan-cli

HyperFrames Master (Logan Standard)

Repo: https://github.com/heygen-com/hyperframes
Dokumentationsindex: https://hyperframes.heygen.com/llms.txt
CLI-Dokumentation: npx hyperframes docs <topic>

Wenn der Benutzer Video / Bewegungsgrafiken / Untertitel / kinetische Produktgeschichten wünscht, behandle HyperFrames als Standard, es sei denn, er nennt explizit einen anderen Stack.

Immer hier starten

1. Rufe den relevanten HyperFrames-Skill vor dem Schreiben von Kompositionen auf.
2. Router-Skill: hyperframes - Fähigkeitskarte + welcher Workflow.
3. Erfinde niemals data-* Semantiken allein aus allgemeinem Webwissen.

Workflow-Routing

Absicht	Workflow-Skill
Produkt-URL / SaaS-Promo	product-launch-video
Allgemeine Site-Tour von URL	website-to-video
Text-Thema, keine Site	faceless-explainer
Untertitel auf sprechendem Kopf	embedded-captions
Grafik-Overlays auf sprechendem Kopf	talking-head-recut
GitHub PR-Erklärung	pr-to-video
Kurze Bewegungsgrafik	motion-graphics
Musikgesteuert	music-to-video
Präsentation / Folien	slideshow
Benutzerdefiniert / Fallback	general-video
Remotion → HyperFrames	remotion-to-hyperframes

Domain-Skills: hyperframes-core, hyperframes-animation, hyperframes-keyframes, hyperframes-creative, hyperframes-cli, hyperframes-media, media-use, hyperframes-registry, figma, gsap.

Befehle

npm run dev          # Vorschau-Server - langlebig, nur im Hintergrund
npm run check        # Linting + Laufzeit + Layout + Bewegung + Kontrast
npm run render       # MP4
npm run publish      # Teilen-Link
npx hyperframes lint --verbose
npx hyperframes docs <topic>
npx hyperframes skills update   # Skills aktualisieren, wenn fehlend/veraltet

Wichtige Kompositionsregeln

1. Zeitgesteuerte Elemente: data-start, data-duration, data-track-index
2. Zeitgesteuerte Elemente müssen class="clip" haben
3. GSAP-Timelines pausieren + registrieren:

   window.__timelines = window.__timelines || {};
   window.__timelines["composition-id"] = gsap.timeline({ paused: true });
   

4. Video: muted Video + separates <audio> bei Bedarf
5. Sub-Kompositionen: data-composition-src="compositions/file.html"
6. Nur deterministisch - kein Date.now(), Math.random(), Netzwerk im Render-Pfad

Nach Bearbeitungen

Führe immer npm run check aus, bevor du die Fertigstellung erklärst. Behebe Fehler; überprüfe Warnungen.

Stack-Paarung (Yuval / YUV.AI Standard)

• Bevorzuge HyperFrames + GSAP für Bewegungsvideos
• React/Next bei Produkt-UI - exportiere Bewegung dennoch über HyperFrames-Workflows, wenn das Ergebnis Video ist
• html-to-canvas / HyperFrames-Render-Pipeline statt ad-hoc ffmpeg-Diashows, es sei denn, der Benutzer wünscht etwas anderes