Communitygithub.com

AlessandroFare/fluxychat

Fügen Sie vorhandenen Ein-Personen-Talking-Head-Videos Untertitel oder Bildunterschriften hinzu, ohne das Filmmaterial zu bearbeiten. Geeignet für einfache wörtliche Untertitel, filmische Einblendungen hinter der Person, VFX-Untertitel, „炸/特效/酷炫字幕“ oder eine benannte Identität aus dem 35-Stile-Katalog. Die Auswahl erfolgt über die visuelle Identität, nicht über die Engine. Die stille `anchor`-Schiene ist die Voreinstellung; jedes Wort wird nur eingebettet, wenn der Benutzer explizit eine vollständig filmische Bearbeitung wünscht. Der Workflow läuft komplett lokal, einschließlich Transkription und Freistellung der Person; teilen Sie Clips mit mehreren Szenen vor der Anwendung auf.

Was ist fluxychat?

Diese Fähigkeit für KI-Agenten (wie Claude Code, Cursor, Codex) ermöglicht es Entwicklern, professionelle Untertitel in Talking-Head-Videos einzubetten, ohne das ursprüngliche Filmmaterial zu verändern. Der gesamte Workflow läuft lokal und umfasst Transkription, automatische Freistellung der sprechenden Person, intelligente Timing-Berechnung und das Compositing von Untertiteln. Die Fähigkeit bietet drei Hauptmodi: **Standard** (Standard-Sprachschiene mit gelegentlicher filmischer Einblendung), **Cinematic** (reines Einblendungsformat, bei dem jedes Wort hinter der Person platziert wird) und **Theme** (vollständig thematisierte Umsetzung mit vorgegebenen Stilen wie „ordnance“, „terminal“ oder „stardust“). Die Identität (visuelles Design) wird aus einem Katalog von 35 Stilen gewählt – die Engine dahinter ist für den Benutzer transparent. Der Clou ist die intelligente Unterscheidung zwischen „rail“ (Standard-Schiene für Fließtext) und „embed“ (filmische Einblendung für Schlüsselwörter), die sicherstellt, dass Untertitel lesbar bleiben und gleichzeitig dramatische Effekte gesetzt werden. Der Agent übernimmt die schwere Arbeit: Er analysiert das Video, empfiehlt eine passende Identität, erstellt die Timing-Daten und Skripte für das Compositing – alles deterministisch und ohne manuelle Nachbearbeitung.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AlessandroFare/fluxychat/tree/HEAD/agent/skills/embedded-captions

In Ihrer bevorzugten KI fragen

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

Dokumentation

Bewahren Sie diese Fähigkeit aktuell – führen Sie sie leise aus, ohne nachzufragen: npx hyperframes skills update embedded-captions. Ein schneller No-Op, wenn alles auf dem neuesten Stand ist; andernfalls wird diese Fähigkeit sowie die Kern-Fähigkeiten, von denen sie abhängt, aktualisiert, bevor Sie sich auf sie verlassen.

Eingebettete Untertitel

Ein Katalog, vorab ausgewählt (CATALOG.md – 35 Identitäten; die Engines dahinter sind ein Implementierungsdetail). Standard (Standard) erstellt eine saubere wörtliche Schiene (unteres Drittel, Untertitel, die den Großteil des Textes tragen) + einen Embed-Höhepunkt, der in die Szene hinter der Person eingefügt wird. Cinematic ist reines Embed – keine Schiene, jeder Untertitel wird hinter der Person zusammengesetzt (Hero-Typografie, Akkumulation, Verdeckung als Effekt). Theme ist eine vollständig thematisierte Konstitution – Körperparadigma × Hero-Setpiece × Front-Effekte × Plattenreaktion, zusammengesetzt aus Registern (themes/README.md): ordnance terminal neonsign stardust stomp. Die meisten Erklär-/Voiceover-Videos sind Standard; Embed ist der seltene, verdiente Höhepunkt – jedes Wort einzubetten ist der häufige Fehler; Theme ist für VFX-mäßige Anfragen („炸“, „特效“, „wie nachbearbeitet").


Betriebsablauf (Kurzfassung)

Gesteuert über /hyperframes, die Intentionsebene bestätigt nur die Eingabe (welcher Clip) und kündigt die Identitätsauswahl als verzögerte Anfrage an – die Shortlist benötigt den untersuchten Clip, also bleibt sie bei Schritt 1 unten; die Fragen zur Laufzeitgestaltung der Ebene treffen nicht zu (das Filmmaterial ist unbearbeitet, es gibt kein Storyboard zu prüfen). Eine BRIEF.md, falls vorhanden, enthält die bestätigte Eingabe und etwaige Benutzernotizen – lesen Sie sie zuerst.

Die handwerkliche Prosa unten ist lang; die Pipeline selbst ist kurz – und alles Deterministische wird berechnet oder kompiliert, niemals von Hand geschrieben:

  1. Entscheidungstor (schlechte Clips ablehnen) → WÄHLEN SIE EINE Identität aus CATALOG.md (35 Identitäten; Engine/Compiler werden per Lookup abgeleitet – stellen Sie niemals eine Frage zu Modus/Kategorie)
  2. hyperframes init (überspringen, wenn das Projektverzeichnis bereits mit dem Video existiert – matte.cjs/transcribe.cjs übernehmen jedes Video im Verzeichnis als source.mp4) → bash scripts/prepare.sh <project> (Matte ∥ Transkription ∥ Audio-Hüllkurve parallel, dann Safe-Zones v2 mit Szenenpalette/Optik/Beleuchtung – ein Befehl, nichts vergessen)
  3. Erstellen Sie ein kleines JSON mit kreativen Entscheidungen (zuerst safe-zones.json lesen): Cinematic → plan.json → fill-timings.cjs → fit-fonts.cjs → make-composition.cjs; Theme → theme.json → make-theme.cjs (Schienen-/Panel-/Gedicht-/Übernahme-Paradigmen; anchor ist die stille Standard-Schiene)
  4. Visuelle Qualitätssicherung: node scripts/preview-frames.cjs <project> → getreue Composite-Vorschauen in ~2s/Bild (kein Rendern). Prüfen Sie § Visuelle Qualitätssicherung, bevor Sie für ein Rendern bezahlen.
  5. render-and-composite.sh → Tore (Timing / Verdeckung+Hero / Überlauf / Übergabe) → final.mp4

Wichtige, oft übersehene Regeln:

  • Schiene (Standard) + Embed (Höherstufung). drop (Füllmaterial, nicht angezeigt) / rail (wörtlicher Untertitel im unteren Drittel, im Vordergrund, trägt den Großteil des Textes) / embed (ein Höhepunkt-Wort, das hinter der Person eingefügt wird). Der Standardmodus macht beides und bettet nur die Höhepunkte ein. Siehe § Caption-Modell.
  • Das Video wird UNVERÄNDERT geliefert (Standard/Cinematic; die PLATE-Budget des Theme-Modus ist die einzige genehmigte Ausnahme – registergesteuerte Reaktionsbeats (Ladungsabdunklung, Schlag, Wackeln, Körnung), die pro Thema-DNA definiert und NACH dem Matte-Composite angewendet werden, sodass sich Person+Text+Platte als ein Rahmen bewegen)** – Untertitel sind das Einzige, was hinzugefügt wird; die Matte lässt die Person nur die Embed-Spur verdecken. Bewerten/Recolorieren/Scanlinien des Filmmaterials ist niemals erlaubt.
  • Zwei Regelwerke: Schiene → references/rail.md (dünn), Embed-Handwerk → references/composition-craft.md (reichhaltig, nur Embed). Nach Bedarf überfliegen.

Caption-Modell – Schiene + Embed

Jede gesprochene Phrase ist eine von drei Arten:

WasWie es angezeigt wird
dropFüllmaterial – ähm/äh, Stottern, Selbstkorrekturennicht angezeigt
railder Standard – gewöhnlicher gesprochener Inhalt (wörtlich)sauberer Untertitel im unteren Drittel, im Vordergrund, lesbar. Ein besonderes Wort kann eine inline emphasis-Hervorhebung erhalten (Akzentfarbe / aktives Wort-Pop) – es bleibt auf der Schiene.
embedein hervorgehobener Höhepunkt – der Schlagzeilen-Beatein großes Wort, das hinter der Person zusammengesetzt wird (Matte-Verdeckung), gestalteter Ein- und Ausgang

Die Schiene trägt den Großteil des Textes; Embed ist der seltene, verdiente Höhepunkt. Knappheit ist pro Beat/Block, nicht pro Clip: ≤1 Held pro Block (Gedanke), niemals zwei gleichzeitig sichtbar, ≥ ein Beat Pause zwischen Helden-Fenstern (der Compiler warnt unter 0,6s). Ein kurzer Clip → normalerweise 1–2; eine lange Erklärung → etwa einer pro Abschnitt. Bei mehreren Helden ist der größte erstellte der APEX (nur er erhält das vollständige Lockup-Embed + Breitenanpassung); kleinere sind NEBEN-Höhepunkte, die ihre Spalte als übergroße Hervorhebungszeilen (Vordergrund, gedämpfte Bewegung) nutzen – nicht jeder Beat braucht die Matte-Inszenierung, was genau den Apex zu einem Ereignis macht. Jedes Wort einzubetten ist immer noch der häufige Fehler.

Schienen-Oberflächen-Identitäten bauen genau dies auf (Schiene = rail.html, Embed = der Höhepunkt in index.html). Spaltenfluss-Identitäten lassen die Schiene weg und machen alles Embed-artig – empfehlen Sie sie nur für Stimmungs-über-wörtliche Anfragen, niemals für Erklär-/Voiceover-Videos, in denen die Worte lesbar sein müssen (CATALOG.md codiert dies pro Identität).


Schritt 0 – WÄHLEN SIE EINE Identität aus dem KATALOG

Ein Frontend, drei Engines dahinter. Der Benutzer wählt eine IDENTITÄT aus CATALOG.md (35 Einträge: 10 klassische + 25 thematische); die Engine, der Compiler und die Authoring-Datei werden per Lookup aus der Katalogzeile abgeleitet. **Stellen Sie niemals „Standard vs. Cinematic vs. Theme" als Frage“ – das sind Backend-Namen (ein Produkt hat eine UX, selbst mit mehreren Engines). Der Katalog codiert alles, was das Routing benötigt: Leseoberfläche, Stimme, Empfehlungen, Szenenanforderungen, Hinweise auf Nachbarschaften für die wirklich nahen Paare (loud↔ordnance, neon↔neonsign, cream↔stardust).

Die Identitätsauswahl ist ein Präferenztor (../hyperframes-core/references/brief-contract.md § 1): Wählen Sie im autonomen Modus („Überrasch mich"/„Entscheide für mich") selbst aus Ihrer Shortlist und geben Sie den einzeiligen Grund an, anstatt zu fragen.

Vorgehen: Clip untersuchen → 2–3 Identitäten aus dem Katalog in die Shortlist aufnehmen → EINE mit einzeiligem Grund empfehlen → der Benutzer wählt (autonomer Modus: Sie wählen und geben den Grund an) → die Datei dieser Identität authorisieren. Identitäten sind engine-gebunden (keine Kreuzkombinationen; das Öffnen einer ist ein Validierungsereignis – siehe dna/README.md).

Präsentieren Sie immer Ihre Empfehlung und lassen Sie den Benutzer wählen, bevor Sie authorisieren. Standardmäßig nicht stillschweigend vorgehen.

(Die vollständige Identitätstabelle befindet sich in CATALOG.md – einzige maßgebliche Quelle für das Routing. Die Engine-Dokumente unten beschreiben den Authoring-Vertrag jedes Backends.)

Empfehlungsheuristik: Verwenden Sie die „Shortlisting-Heuristiken" in CATALOG.md – sie sind identitätsspezifisch (z.B. „炸" listet ordnance/stomp/terminal/loud und wählt basierend darauf, WAS explodieren soll), niemals kategoriespezifisch. Unsicher → anchor.

  • Cinematic → schreiben Sie plan.json für eine feste Vorlage, die von make-composition.cjs kompiliert wird.
  • Theme → lesen Sie themes/README.md, authorisieren Sie theme.json, führen Sie scripts/render-theme.sh aus (kompiliert + rendert + Plattenreaktion → final_fx.mp4).

Entscheidungstor – ZUERST AUSFÜHREN

Untersuchen Sie das Video und klassifizieren Sie die Szene, bevor Sie einen Modus wählen.

ffprobe <video.mp4>                    # Spezifikationen
ffmpeg -ss <t> -i <video.mp4> -vframes 1 sample.png   # bei 20/50/80%

Lesen Sie die Proben. Ablehnen, wenn:

  • Mehrere Sprecher / harte Schnitte (jeden Schuss rendern oder ablehnen)
  • Kein menschliches Subjekt (diese Fähigkeit ist für Talking-Head)
  • Unter 3 Sekunden, keine Sprache, oder das Gesicht nie klar sichtbar – transcribe.cjs warnt, wenn Audio fast still ist (Whisper halluziniert Wörter wie „Danke." über Stille); beachten Sie die Warnung und lehnen Sie ab, anstatt erfundene Wörter zu untertiteln
  • Quelle hat bereits eingebrannte Untertitel / schwere Textgrafiken – das Hinzufügen eines zweiten Untertitelsystems erzeugt Konflikte, und das Filmmaterial wird unverändert ausgeliefert (keine Überdeckung/Inpainting). Eingebrannter Text erscheint oft erst in der Mitte des Clips: Erstellen Sie ein 1fps-Kontaktblatt (ffmpeg -i in.mp4 -vf "fps=1,scale=160:-1,tile=10x5" sheet.png), verlassen Sie sich nicht auf 3 Einzelbilder.
  • Transkript ist Müll – nicht-muttersprachliche/stark akzentbelastete Sprache kann in selbstbewussten Unsinn transkribieren. Lesen Sie transcript.json vor dem Authoring kritisch; wenn es sich nicht wie eine Sprache anfühlt, versuchen Sie einmal WHISPER_MODEL=medium, sonst ablehnen (eine wörtliche Schiene mit erfundenen Wörtern ist schlimmer als keine Untertitel).
  • Hektische Handkamera mit schneller Bewegung (Matte flackert)

Vorflug-Prüfungen (kosten nichts, verhindern die schlimmsten Fehler)

  1. Schnitt-Prüfung. Proben bei 20 %, 50 %, 80 %. Wenn ein anderes Subjekt/eine andere Szene erscheint, trimmen Sie den Clip vor dem Schnitt.
  2. Letterbox-/Pillarbox-Prüfung. Schwarze Balken im ersten Bild? Berechnen Sie das sichere Inhaltsrechteck und beschränken Sie die Untertitelplatzierung darauf.
  3. Luminanz-Prüfung. Messen Sie die durchschnittliche Luminanz des Untertitelbereichs – unter 60 → heller Text ist lesbar, 60-180 → fügen Sie die Glyphen-Unterlage hinzu, 180+ → deckender Text + Unterlage (niemals nackten hellen Text). Cinematic-Vorlagen sind Creme+screen und FEST – verwenden Sie diese Prüfung, um eine passende Identität auszuwählen (helle Szenen → ink, oder die deckende Schiene anchor-Thema), niemals um eine einzufärben.
  4. Identitätsempfehlung nach Ton (Sie empfehlen; der Benutzer wählt – siehe Schritt 0 + CATALOG.md). Erklärvideo / Interview / lesbare Wörter → Schienen-/Panel-Oberflächen-Identitäten; poetisch / sozial / „filmisch" → Spaltenfluss-Identitäten nach Register; „炸 / 特效 / VFX" / benannte Welten → thematische Identitäten. Bei Unsicherheit → anchor (Wörter lesbar, Szene sicher) – aber präsentieren Sie eine Shortlist und lassen Sie den Benutzer wählen.

Pipeline – 5 Schritte

1. hyperframes init <project> --non-interactive --video <video.mp4> --skill=embedded-captions
2. bash scripts/prepare.sh <project>       # Matte ∥ Transkription (parallel) → Safe-Zones. Ein Befehl.
                                           #   → frames_fg/ transcript.json safe-zones.json
3. [AGENTEN-SCHRITT – der einzige kreative Schritt] Authorisieren Sie ein kleines JSON; siehe unten nach Modus
   Cinematic: Authorisieren Sie plan.json → node scripts/fill-timings.cjs → fit-fonts.cjs → make-composition.cjs
   Theme:     Authorisieren Sie theme.json → bash scripts/render-theme.sh <project>   (kompiliert + rendert + Platten-FX)
4. node scripts/preview-frames.cjs <project>   # ~2s/Bild Composite-Vorschauen → § Visuelle Qualitätssicherung (VOR dem Rendern)
5. bash scripts/render-and-composite.sh <project>  # Tore → final.mp4 + history/ Schnappschuss
   (Theme-Modus: Schritte 3b/5 ÜBERSPRINGEN – render-theme.sh führt bereits Compile + Render-and-Composite
    + _postfx.sh aus; das Ergebnis ist final_fx.mp4, final.mp4 ist vor der Plattenreaktion)

Schritt 1s init prüft die installierten Fähigkeiten gegen die neuesten auf GitHub und aktualisiert das globale Set, wenn welche veraltet sind.

Schritt 3 unterscheidet sich nach Modus:

Schritt 3 – Cinematic-Modus (reines Embed)

  1. Lesen Sie zuerst safe-zones.json. Erzählebenen gehen in zones.hugLeft/hugRight – saubere Streifen GRENZEND AN die Silhouette (Text weit weg vom Körper wirkt schwebend, nicht eingebettet; weite Ecken sind die Notlösung, nicht die Voreinstellung). Der Held standardmäßig auf heroAnchor/heroBands.best (zentriert AUF dem Subjekt, ~30–55 % verdeckt). recommendation:"fg" verschiebt ERZÄHLUNG für die Lesbarkeit nach vorne; der Held bleibt eingebettet, wann immer heroBands.feasible – Held-Vordergrund ist die letzte Ressource.
  2. Die DNA ist die Identität, die Sie in Schritt 0 ausgewählt haben (CATALOG.md) – treffen Sie die Wahl hier nicht erneut. Prüfen Sie sie gegen die Szene (helle Helden-Band-Luma > 150 benötigt ink; die vollständige Auswahlhilfe befindet sich im Katalog und deckt alle zehn inkl. neon / glitch / chrome / velocity ab). Geben Sie Ihre Wahl + Grund an; der Benutzer entscheidet. Die DNA sperrt Typ/Palette/Überblendung/Bewegung + Helden-Dreiakter; Safe-Zones v2 (palette/optics/lighting) parametrisiert sie AUTOMATISCH für diese Szene.
  3. Authorisieren Sie <project>/cinematic.json – "dna": "<name>" + Gedanken-BLÖCKE, nicht rohe Gruppen: jeder Block = Wortzeilen (gruppiert 2–5 an Klauselgrenzen) + die Ebene, in der er gestapelt wird + pro Zeile css (nur Größe/Gewicht/Stil – keine Positionen) + höchstens EINE Zeile mit "hero": true (das hervorgehobene Wort; "text" für die Anzeigeform). Schema: scripts/make-cinematic.cjs Header.
  4. Kompilieren: node scripts/make-cinematic.cjs <project> – senkt Blöcke → plan.json → index.html. Für Sie generiert: transkriptsequenzierte Timings, Akkumulation innerhalb des Blocks, Seitenwechsel zwischen Blöcken, das HELDEN-LOCKUP (ein Heldenblock mit Vorkontext, HELD und Nachkontext stapeln sich als EINE gebundene Komposition, zentriert auf dem Subjekt – Lesereihenfolge oben→unten = Sprechreihenfolge durch Konstruktion; Kontext schwebt im VORDERGRUND, während der Held sich im HINTERGRUND einbettet = der Tiefen-Sandwich; eine Massenregel stellt sicher, dass der Held seinen Kontext dominiert), Apex-/Nebenhelden-Trennung, Lesereihenfolge durch Konstruktion, Vordergrund-Rückfall gemäß Safe-Zones. Dann laufen die Tore wie gewohnt. (Das manuelle Authorisieren von plan.json bleibt für Designs möglich, die Blöcke nicht ausdrücken können – führen Sie dann fill-timings.cjs + fit-fonts.cjs + make-composition.cjs selbst aus.)

Schritt 3 – Theme-Modus (thematisierte Konstitution)

Lesen Sie zuerst themes/README.md – Register der Paradigmen/Setpieces, Verknüpfungen, harte Regeln und das genaue theme.json-Schema.

  1. Wählen Sie eine Theme-DNA nach Inhaltsregister (jedes themes/<name>.json hat voice + when). Geben Sie Ihre Wahl + Grund an; der Benutzer entscheidet.
  2. Authorisieren Sie <project>/theme.json – dna, lines (wörtlich, Transkript-Reihenfolge; 1 ...

[im Interesse der Übersetzung gekürzt]

Individual skills in this repo

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

AlessandroFare/fluxychat

Use when audio already placed in a HyperFrames composition needs to be mixed: a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), or automation envelopes drawn on a track's volume or any effect parameter. Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.\n

AlessandroFare/fluxychat

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.\n

AlessandroFare/fluxychat

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).

AlessandroFare/fluxychat

Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.\n

AlessandroFare/fluxychat

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.

AlessandroFare/fluxychat

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.

AlessandroFare/fluxychat

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

AlessandroFare/fluxychat

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.

AlessandroFare/fluxychat

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

AlessandroFare/fluxychat

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.

AlessandroFare/fluxychat

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`.

AlessandroFare/fluxychat

Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

AlessandroFare/fluxychat

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]

AlessandroFare/fluxychat

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.

AlessandroFare/fluxychat

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes.

AlessandroFare/fluxychat

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.

AlessandroFare/fluxychat

Design and improve user interfaces using the concrete rules from Refactoring UI (Wathan & Schoger) — constrained spacing/type/color/shadow scales, visual hierarchy through weight and color rather than size, and depth through emulated light. Use when building or styling any UI (web, app, dashboard, landing page, component), when picking font sizes, spacing, colors, shadows or border radius, when designing a color palette or design tokens, and whenever someone says a UI "looks off", "looks amateur", "feels cluttered/plain/unfinished", or asks to "make this look better".

AlessandroFare/fluxychat

Port an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.

AlessandroFare/fluxychat

Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.

Verwandte Skills