Communitygithub.com

Drama2557/4RealDigital-Video-Studio

Wandle einen Musiktitel (Audiodatei, Video zur Audioextraktion oder einen aus einer Stimmungsvorgabe generierten Track) in ein taktsynchrones Video um – Lyric-Video, Diashow oder kinetischer Promo. Die Musik bestimmt das Tempo; benutzerbereitgestellte Bilder/Videos werden auf dasselbe Beat-Raster geschnitten, und ein vollständiges Video benötigt null Assets.

Was ist 4RealDigital-Video-Studio?

Diese Fähigkeit (Skill) für KI-Agenten (z. B. Claude Code, Cursor, Codex) orchestriert die Erstellung eines taktsynchronen HyperFrames-Videos, das vollständig von einem Musiktrack angetrieben wird. Der Agent analysiert den Track einmalig mit einem dedizierten Beat-Analyzer („analyze-beatgrid.py“), erstellt ein Gerüst aus Frames auf Basis musikalischer Phrasen und füllt diese anschließend mit einem genehmigten Plan, der Vorlagen, Bewegungsprimitive oder bereitgestellte Medien nutzt. Das Besondere ist der vollständig autonome Workflow: Der Skript interpretiert die Intention des Nutzers, generiert ggf. einen Track, plant Frames, verteilt die Erstellung jedes Frames an Sub-Agenten („frame-worker“), baut die finale HTML-Seite zusammen und rendert das Video – mit Checkpoint-Gates für die Freigabe durch den Nutzer. Unterstützt werden Plattformen wie HyperFrames, und der Workflow ist auf hohe Energie und schnelle Beats optimiert, wobei das Design (Schriftarten, Farbpalette) erst in Schritt 3 festgelegt wird.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Drama2557/4RealDigital-Video-Studio/tree/HEAD/.agents/skills/music-to-video

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Erstens: Halte diesen Skill frisch – führe ihn still aus, ohne nachzufragen: npx hyperframes skills update music-to-video. Ein schneller No-op, wenn alles aktuell ist; andernfalls aktualisiert er diesen Skill sowie die Kern-Skills, von denen er abhängt, bevor du dich darauf verlässt.

music-to-video – Ein musikgestützter, taktsynchroner Video-Workflow

Nutze diesen Skill, um einen Musiktrack in ein taktsynchrones HyperFrames-Video zu verwandeln. Du analysierst den Track einmal, legst die Frames fest, erstellst einen Plan pro Frame und baust jedes Frame als Komposition. Die Eingabe ist ein Musiktrack plus optionale Benutzerbilder oder -videos – es gibt keine Erzählung und kein Website-Capture. Typografie und Vorlagen sind der Boden (ein vollständiges Video benötigt null Assets); alle Medien, die der Benutzer bereitstellt, werden auf dasselbe Beat-Raster geschnitten.

Du bist der Orchestrator. Arbeite in videos/<project>/. Führe die Schritte in der Reihenfolge aus und passiere jedes Gate, bevor du fortfährst. Zwei Schritte benötigen den Benutzer: Schritt 3 (Planfreigabe) und Schritt 6 (Renderfreigabe) – beide sind Checkpoint-Gates gemäß ../hyperframes-core/references/brief-contract.md (lies es vor Schritt 0): Im autonomen Modus veröffentliche die Zusammenfassung als Hinweis und fahre fort, anstatt zu warten. Führe jeden Schritt selbst aus, außer Schritt 4, wo du einen Sub-Agenten pro Frame beauftragst. Bewahre Design- und Bewegungsregeln außerhalb dieser Datei auf – sie leben in references/ und dem Sub-Agenten frame-worker.

SKILL_DIR = dieses Skill-Verzeichnis. PROJECT_DIR = videos/<project-name>/.

Workflow: Schritt 0 Setup → hyperframes.json + assets/bgm.mp3; Schritt 1 Analyse → audiomap.json; Schritt 2 Gerüst → STORYBOARD.md (Frames, Gruppen TBD); Schritt 3 Plan → vollständige STORYBOARD.md + frame.md; Schritt 4 Bau → compositions/frames/NN-*.html; Schritt 5 Zusammensetzen → index.html; Schritt 6 Rendern → renders/video.mp4.

Zwei Ideen, die alles prägen

  • Ein Analysator, und du vertraust ihm. analyze-beatgrid.py ist der einzige Beat-Analysator – messe Beats niemals neu mit einem anderen Tool oder nach Gehör. Seine Energie-/Dichte-/Roll-/Onset-/Pausenwerte sind immer zuverlässig. Sein bpm und beats_sec sind nur dann zuverlässig, wenn die Musik wirklich rhythmisch ist; bei ruhiger Musik ist das Raster ein Metronom, das der Tracker aufgezwungen hat. Orientiere dich stattdessen an Phrasen und Energie und schneide niemals hart darauf. Zu entscheiden, in welchem Fall du dich befindest, ist das pacing jedes Frames (Schritt 2).
  • Ein Frame = eine Datei; Gruppen leben darin. Schritt 2 teilt den Track in Frames, und jedes Frame wird zu einer Kompositionsdatei compositions/frames/NN-<frame_id>.html, gebaut von einem Frame-Worker. Ein Frame kann in Gruppen unterteilt werden (jede eine Vorlage oder eine Kombination von Bewegungsprimitiven). Zusätzliche Dichte geht innerhalb einer Gruppe, sodass die Frame-Anzahl verschiedene Behandlungen verfolgt, nicht Beats – ein schneller Track lässt die Anzahl der Sub-Agenten nicht explodieren.

Schritt 0: Setup, BGM und Eingaben

Ziel: Die Musikquelle etablieren, das HyperFrames-Projekt erstellen und alle benutzerbereitgestellten Medien notieren.

Das Brief beginnt auf der Intentionsebene. Öffnungsregel, in der Reihenfolge: (1) BRIEF.md existiert → lies es und frage nichts, was es beantwortet – sein flow/storyboard leiten den Modus ab (Briefvertrag § 1). (2) Kein BRIEF.md, aber das Projekt existiert → setze von dem fort, was auf der Platte ist; befrage niemals erneut. (3) Eine neue Erstellungsanfrage, die direkt hier ankam → lies /hyperframes und führe seine Intentionsebene aus (references/intent-interview.md): Es bestätigt die Muss-Kriterien dieser Route (die Musikquelle, Ziel → Seitenverhältnis – ../hyperframes/references/routes/music-to-video.md) und kündigt an, was aufgeschoben bleibt – Marke und Genre werden absichtlich in Schritt 3 gewählt. Schreibe BRIEF.md sofort nach der Init (niemals davor – init lehnt ein nicht leeres Verzeichnis ab) und zeichne die präferenzgestützten Antworten auf (brief-format.md). Bearbeitungsanfragen überspringen all dies.

Die Musik ist das Rückgrat – etabliere einen Track, bevor irgendetwas anderes passiert. Dieser Skill ist optimiert für schnelle, energiegeladene BGM: Ein starkes Beat-Raster treibt die Schnitte (ruhige Tracks funktionieren, aber orientiere dich eher an Phrasen als am Beat). Wenn der Benutzer Audio bereitgestellt hat – eine Musikdatei oder ein Video, um Audio zu extrahieren – verwende es. Andernfalls wähle die Stimmung aus der Anfrage und generiere einen Track über /media-use (references/bgm.md). Vor der ersten authentifizierten Provider-Aktion führe npx hyperframes auth status aus und gib seine Ausgabe wörtlich weiter. Wenn abgemeldet, wende einen Zweig an:

  • Kollaborativ: Warte auf die Anmeldung oder eine explizite Wahl, um offline mit dem lokalen Provider fortzufahren.
  • Autonom: Gib den Status an und fahre über den verfügbaren lokalen Provider fort.

Wenn kein Offline-Provider die erforderliche Musikfähigkeit erfüllen kann, zeige den Blocker an. Schreibe niemals Schlüssel in ein pro-Repos .env. Auth-Eigentum und Offline-Fallbacks leben in /media-use references/setup-providers.md § Provider. Der resultierende Track landet unter assets/bgm.mp3. Bühne bereitgestellte Bilder oder Videos, sodass Frames sie auf dem Beat-Raster verwenden können; andernfalls trägt Typografie das Video.

Lyric-Videos: Für Texte, die auf den Gesang synchronisiert sind, erhalte die Wort-/Zeilen-Timing durch Transkription des Tracks über /media-use, oder frage den Benutzer nach dem Liedtext und platziere die Zeilen auf dem Beat-Raster.

Initialisiere nur, wenn hyperframes.json fehlt. Benenne <project> aus dem Brief in Kebab-Case, z. B. midnight-drive-loop – niemals einen Zeitstempel. init prüft die installierten Skills gegen die neuesten auf GitHub und aktualisiert das globale Set, wenn eines veraltet ist.

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=music-to-video
mkdir -p "$PROJECT_DIR/assets" "$PROJECT_DIR/renders"
cp "<user-music>" "$PROJECT_DIR/assets/bgm.mp3"   # ggf. zuerst aus einem Video extrahieren
# nur wenn der Benutzer dir Bilder/Videos gegeben hat:
node <SKILL_DIR>/scripts/stage-assets.mjs --from <dir> --hyperframes "$PROJECT_DIR" --into public

Die Marke (Schriftart + Palette) wird in Schritt 3 gewählt, nicht hier. Wähle nicht vorab ein Genre oder eine Track-Art – Assets sind nur eine optionale Zutat, und das Genre ergibt sich aus den Entscheidungen pro Frame.

Gate: hyperframes.json + assets/bgm.mp3 existieren; Seitenverhältnis / Länge / fps und (falls vorhanden) das Asset-Inventar sind notiert.


Schritt 1: Analysiere die Musik

Ziel: Die eine kanonische Timing-Analyse erstellen, auf der das gesamte Video aufbaut.

analyze-beatgrid.py ist der einzige Beat-Analysator – messe Beats niemals neu mit einem anderen Tool oder nach Gehör. Es liest den Track einmal und schreibt audiomap.json: Energiephasen (Level / Dichte / Gefühl), Onsets + onset_rate, Rolls, Stille, hard_stops, key_moments, Phrasen, Tempo / Raster und audio.duration_sec. Es ist deterministisch – dieselbe Datei ergibt immer dieselbe Karte. Die meisten Felder sind bei jeder Musik zuverlässig; bpm und beats_sec sind nur zuverlässig, wenn die Musik wirklich rhythmisch ist, und dies zu beurteilen ist der Aufruf, den du in Schritt 2 triffst.

Voraussetzungen: Python 3 mit librosa, numpy und soundfile verfügbar. Wenn der Import fehlschlägt, installiere sie in die aktive Python-Umgebung, bevor du den Analysator ausführst:

python3 -m pip install librosa numpy soundfile
python3 <SKILL_DIR>/scripts/analyze-beatgrid.py "$PROJECT_DIR/assets/bgm.mp3" \
  -o "$PROJECT_DIR/audiomap.json" --print

Gate: audiomap.json existiert; audio.duration_sec ist bekannt.


Schritt 2: Frame-Gerüst (nur Struktur)

Ziel: Die Musik lesen und die Frames anlegen – das Gerüst von STORYBOARD.md.

Lies references/frame-skeleton.md. Verwandle audiomap.json selbst in das Gerüst von STORYBOARD.md – es gibt kein dazwischenliegendes JSON. Schneide den Track in Frames an echten musikalischen Veränderungen (hard_stops, SURGE / DROP key_moments, die Ränder eines Rolls, ein Bereich ohne Onsets, ein großer Energiesprung) und raste jede Grenze zu einem Audiomap-Anker ein. Setze für jedes Frame span_sec, pacing (das Urteil aus dem Vertrauensaufruf von Schritt 1 – beat_cut, wenn das Raster echt ist, phrase_flow, wenn es ein Metronom ist, das ruhiger Musik aufgezwungen wurde), mood und eine einzeilige feel (die einfache Musiksituation, die Schritt 3 mit einer Vorlage abgleicht). Klassifiziere und lege hier nur aus: Lasse die ### Groups jedes Frames als TBD (Step 3) und das Frontmatter style leer – keine Vorlagen, kein Text, keine Farbe, keine Schriften. Erwarte ~1–6 Frames.

Gate: Frames kacheln den Track (erstes bei 0, letztes bei duration_s); jedes trägt span_sec + pacing + mood + feel; jedes ### Groups ist TBD; kein Inhalt irgendwo.


Schritt 3: Fülle den Plan (benutzergesteuert)

Ziel: Das Gerüst in ein freigegebenes, vollständiges STORYBOARD.md verwandeln.

Lies references/planning.md, storyboard-format.md, template-catalog.md, motion-primitive-catalog.md und montage.md (nur wenn der Benutzer Assets bereitgestellt hat). Bearbeite dieselbe Datei direkt und mache zwei Dinge:

  1. Wähle die Marke. Wähle ein Preset aus ../hyperframes-creative/frame-presets/ mit der Tabelle in ../hyperframes-creative/references/design-spec.md (passe die Stimmung des Tracks an; nur seine Schriftarten und Farben sind wichtig – Vorlagen bestimmen die Komposition). Kopiere es unverändert in frame.md und fülle das Frontmatter style (Schriftart + eine Palette von ≤4–6 Farbmustern) daraus.
  2. Fülle jedes Frame. Entscheide seine Gruppen und gib jeder eine Behandlung: eine passende Vorlage aus dem Katalog (mit gebundenen Parametern und echten Audiomap-Ankern), eine freie Komposition aus dem Primitive-Katalog oder eine Asset-Behandlung, die pacing befolgt. Schreibe den Text. Du bestimmst WAS (Vorlage / Primitive + Inhalt + Anker); der Frame-Worker bestimmt WIE – schreibe niemals Millisekunden-Tweens in das Storyboard.
node <SKILL_DIR>/scripts/validate-plan.mjs --storyboard "$PROJECT_DIR/STORYBOARD.md" \
  --audiomap "$PROJECT_DIR/audiomap.json" --templates <SKILL_DIR>/references/templates

Behebe jedes ✗ (harte Fehler: Dauerinkonsistenz, Frames, die den Track nicht kacheln, eine fehlende src); Warnungen sind nach bestem Wissen und Gewissen. Zeige dem Benutzer dann eine zusammenfassende Übersicht pro Frame und iteriere, bis er zustimmt. Im autonomen Modus ist dies ein Checkpoint-Gate: Veröffentliche die Zusammenfassung als Hinweis und fahre fort (der validate-plan.mjs-Durchlauf ist ein Qualitätsgate und blockiert weiterhin).

Gate: frame.md ist eine wörtliche Preset-Kopie; validate-plan.mjs endet mit 0; der Benutzer hat den Plan genehmigt (autonom: die Zusammenfassung wurde als Hinweis veröffentlicht).


Schritt 4: Baue Frames aus dem Plan

Ziel: Jedes Frame als eigenständige Kompositionsdatei bauen.

Erstelle compositions/frames/. Lies sub-agents/frame-worker.md und ../hyperframes-core/references/subagent-dispatch.md. Beauftrage einen Frame-Worker pro Frame, parallel wo möglich (andernfalls in Wellen). Jeder Worker erhält genau ein Frame und diesen Kontext:

PROJECT_DIR: <absoluter Pfad>
frame_id: <NN-frame_id>              # = der Dateiname des Frames, z. B. 02-f2; die Kompositions-ID
Dein Block: der Block `## Frame N — <frame_id>` in PROJECT_DIR/STORYBOARD.md
audiomap: PROJECT_DIR/audiomap.json
frame.md: PROJECT_DIR/frame.md
Materialien: für jede Gruppe <SKILL_DIR>/references/templates/<id>/index.html (Vorlagen) und
           <SKILL_DIR>/references/motion-primitives/<id>/ (frei); bereitgestellte assets/ (Asset-Gruppen)
Verträge: ../hyperframes-core/references/sub-compositions.md + determinism-rules.md
Leinwand: <B>x<H>   Taktung: <beat_cut|phrase_flow>
Schreibe nach: PROJECT_DIR/compositions/frames/<frame_id>.html

Der Worker forkert die zitierten Materialien, konvertiert jeden Anker in frame-lokale Sekunden (local_t = track_t − span_sec[0]), setzt seine Gruppen mit 0 ms Schnitten und schreibt eine suchsichere Frame-Datei. Der Worker führt niemals die hyperframes-CLI aus – diese Befehle operieren auf dem zusammengesetzten Projekt, das noch nicht existiert, daher würden sie über die falschen Dateien berichten. Der Worker schreibt einfach gemäß dem Vertrag und stoppt; du überprüfst nach der Montage (Schritt 6). Sobald jeder Worker zurückkommt, kannst du bestätigen, dass seine Datei auf der Platte gelandet ist.

Gate: Jedes Frame hat seine compositions/frames/NN-*.html auf der Platte.


Schritt 5: Zusammensetzen

Ziel: Die gebauten Frames + BGM in die abspielbare index.html verdrahten.

assemble-index.mjs ist deterministisch – kein Sub-Agent, keine Beurteilung. Es referenziert jede Frame-Datei an ihrem kumulativen data-start, mountet assets/bgm.mp3 auf Spur 11 und schneidet hart Frame → Frame (Frames kacheln den Track lückenlos, daher gibt es keinen Übergangsinjektor).

node <SKILL_DIR>/scripts/assemble-index.mjs --storyboard "$PROJECT_DIR/STORYBOARD.md" \
  --hyperframes "$PROJECT_DIR" --audiomap "$PROJECT_DIR/audiomap.json"

Behebe alle gemeldeten ✗ – eine fehlende oder leere Frame-Datei bedeutet, dass der Worker eine unvollständige Datei geschrieben hat; beauftrage ihn erneut (Schritt 4) und setze erneut zusammen.

Gate: index.html existiert; Gesamtdauer == audiomap.audio.duration_sec.


Schritt 6: Überprüfen und rendern

Ziel: Das zusammengesetzte Video überprüfen, die Benutzerfreigabe einholen und das endgültige MP4 rendern.

Führe die CLI auf dem zusammengesetzten Projekt aus – das ist die korrekte Einheit (die Frame-Worker konnten sie nicht ausführen). check führt strukturelles Linting und den headless-Browser-Laufzeit-, Layout-, Bewegungs- und Kontrast-Gate in einem Durchlauf aus; --snapshots gibt auch die Überprüfungs-Frames aus.

( cd "$PROJECT_DIR" && npx hyperframes check . --snapshots )

Überprüfe bei t=0, jedem Frame-Start, dem stärksten DROP / SURGE, jedem hard_stops[].t und dem letzten Frame. Bei Fehlern mache die günstigste sichere Behebung selbst: bearbeite die betreffende compositions/frames/NN-*.html. Ändere niemals die Dauer oder das Audio-Timing, um ein Synchronisationsproblem zu verstecken. Sobald die Gates bestanden sind, halte für die Benutzerüberprüfung inne und rendere nur nach Freigabe (autonomer Modus: stelle die eine zurückgehaltene Frage – „Vorschau zuerst oder rendern?“ – und liefere dann das MP4 mit dem Kontaktbogen aus):

( cd "$PROJECT_DIR" && npx hyperframes render . --skill=music-to-video -q draft -o renders/video.mp4 --fps 30 )

Gate: check bestanden und die Schnappschüsse wurden überprüft; der Benutzer hat freigegeben (autonomer Modus: Prüfungen bestanden und die Auslieferung enthält den Kontaktbogen); renders/video.mp4 existiert mit Audio, Dauer == audiomap.audio.duration_sec. Die endgültige Antwort gibt den MP4-Pfad und die Dauer an.


Fortsetzungstabelle

| Du hast | Setze fort von | | -- | … (Fortsetzung gekürzt)

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

Drama2557/4RealDigital-Video-Studio

Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint #13 (captions overlay, keep-out band retired) from the product-launch-video scene agent. Applies ON TOP of embedded-captions.

Drama2557/4RealDigital-Video-Studio

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

Drama2557/4RealDigital-Video-Studio

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

Drama2557/4RealDigital-Video-Studio

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.

Drama2557/4RealDigital-Video-Studio

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

Drama2557/4RealDigital-Video-Studio

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

Drama2557/4RealDigital-Video-Studio

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.

Drama2557/4RealDigital-Video-Studio

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.

Drama2557/4RealDigital-Video-Studio

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

Drama2557/4RealDigital-Video-Studio

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

Drama2557/4RealDigital-Video-Studio

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

Drama2557/4RealDigital-Video-Studio

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

Drama2557/4RealDigital-Video-Studio

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

Drama2557/4RealDigital-Video-Studio

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

Drama2557/4RealDigital-Video-Studio

Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on "graphic overlays", "on-screen graphics", "package / dress up my video". Not plain subtitles (/embedded-captions). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Agent skill / project related to launch or product demo video: Drama2557/4RealDigital-Video-Studio

Verwandte Skills