Communitygithub.com

sous-titres-incrustes

Ajoute des légendes incrustées professionnelles aux vidéos de type tête parlante, avec un système de rail (bas de l'écran) et d'incrustation contextuelle derrière le sujet.

Qu'est-ce que sous-titres-incrustes ?

Cette compétence permet d'ajouter des légendes incrustées de haute qualité aux vidéos de type tête parlante, en combinant un rail de sous-titres standard en bas de l'écran et des incrustations contextuelles de mots-clés derrière le sujet. Conçue pour les agents IA comme Claude Code, Cursor ou Codex, elle offre trois modes : Standard (rail + incrustation), Cinématographique (incrustation pure) et Thématique (effets VFX complets). Le pipeline automatisé analyse la vidéo, choisit une identité parmi 35 options, génère le composite et applique des règles de rareté pour éviter la surcharge d'incrustation. Idéale pour les explicateurs, interviews ou contenus sociaux, elle refuse les vidéos sans sujet clair ou avec sous-titres déjà incrustés. Les utilisateurs peuvent prévisualiser les composites avant le rendu final.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/embedded-captions

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Tout d'abord, gardez cette compétence à jour — exécutez silencieusement, sans demander : npx hyperframes skills update embedded-captions. Une opération rapide sans effet si tout est à jour ; sinon, elle rafraîchit cette compétence ainsi que les compétences du domaine central dont elle dépend avant que vous ne les utilisiez.

Légendes incrustées

Un catalogue, choisi en amont (CATALOG.md — 35 identités ; les moteurs derrière sont des détails techniques). Standard (par défaut) construit un rail propre et textuel (sous-titre en bas de l'écran portant la plupart du texte) + un point culminant incrusté composité dans la scène derrière le sujet au sommet. Cinématographique est une incrustation pure — pas de rail, chaque légende est compositée derrière le sujet (typographie héroïque, accumulation, occlusion comme effet). Thème est une constitution thématique complète — paradigme corporel × pièce maîtresse héroïque × effets avant × réaction de plaque, composée à partir de registres (themes/README.md) : ordnance terminal neonsign stardust stomp. La plupart des explicateurs / voix off sont en Standard ; l'incrustation est le sommet rare et mérité — incruster chaque mot est l'erreur courante ; Thème est réservé aux demandes de qualité VFX ("炸", "特效", "comme fait dans AE").


Flux opérationnel (TL;DR)

Acheminé via /hyperframes, la couche d'intention confirme uniquement l'entrée (quel clip) et annonce le choix d'identité comme une demande différée — la shortlist nécessite le clip analysé, donc elle reste à l'étape 1 ci-dessous ; les questions de forme d'exécution de la couche ne s'appliquent pas (la vidéo est intacte, il n'y a pas de storyboard à examiner). Un BRIEF.md, lorsqu'il est présent, contient l'entrée confirmée et les notes de l'utilisateur — lisez-le en premier.

Le texte de création ci-dessous est long ; le pipeline lui-même est court — et tout ce qui est déterministe est calculé ou compilé, jamais écrit à la main :

  1. Porte de décision (refuser les mauvais clips) → choisir UNE identité dans CATALOG.md (35 identités ; moteur/compilateur dérivé par recherche — ne posez jamais de question sur le mode/catégorie)
  2. hyperframes init (ignorez-le si le répertoire du projet existe déjà avec la vidéo à l'intérieur — matte.cjs/transcribe.cjs adoptent toute vidéo dans le répertoire comme source.mp4) → bash scripts/prepare.sh <projet> (matte ∥ transcription ∥ enveloppe audio en parallèle, puis zones de sécurité v2 avec palette de scène/optique/éclairage — une commande, rien oublié)
  3. écrire un petit JSON de choix créatifs (lisez safe-zones.json en premier) : Cinématographique → plan.json → fill-timings.cjs → fit-fonts.cjs → make-composition.cjs ; Thème → theme.json → make-theme.cjs (paradigmes rail/panneau/poème/reprise ; anchor est le défaut de rail silencieux)
  4. QA visuelle : node scripts/preview-frames.cjs <projet> → aperçus composites fidèles en ~2s/image (pas de rendu). Vérifiez § QA visuelle avant de payer un rendu.
  5. render-and-composite.sh → portes (timing / occlusion+héros / débordement / transfert) → final.mp4

Règles importantes que les gens oublient :

  • rail (par défaut) + incrustation (promotion). drop (bourrage, non affiché) / rail (sous-titre textuel en bas de l'écran, devant, porte la plupart du texte) / incrustation (un mot culminant composité derrière le sujet). Le mode Standard fait les deux, n'incrustant que le(s) sommet(s). Voir § Modèle de légende.
  • La vidéo est livrée INTACTE (Standard/Cinématographique ; le budget PLATE du mode Thème est la seule exception autorisée — les beats de réaction définis par registre (charge-dim, punch, shake, grain) définis par l'ADN du thème et appliqués APRÈS le composite matte afin que le sujet+texte+plaque se déplacent comme un seul cadre) — les légendes sont la seule chose ajoutée ; le matte permet seulement au sujet d'occlure la piste d'incrustation. Ne jamais étalonner/recoloriser/scanliner la vidéo.
  • Deux livres de règles : rail → references/rail.md (mince), création d'incrustation → references/composition-craft.md (riche, incrustation uniquement). Parcourez selon les besoins.

Modèle de légende — rail + incrustation

Chaque phrase parlée est l'une des trois choses :

QuoiComment c'est affiché
dropremplissage — euh/hein, bégaiements, auto-correctionsnon affiché
raille défaut — contenu parlé ordinaire (textuel)sous-titre propre en bas de l'écran, devant, lisible. Un mot fort peut recevoir un surlignage emphasis en ligne (couleur d'accent / pop de mot actif) — il reste sur le rail.
incrustationun sommet promu — le beat principalun grand mot composité derrière le sujet (occlusion matte), entrée + sortie conçues

Le rail porte la plupart du texte ; l'incrustation est le sommet rare et mérité. La rareté est par beat/bloc, pas par clip : ≤1 héros par bloc (pensée), jamais deux co-visibles, ≥ un beat d'air entre les fenêtres de héros (le compilateur avertit en dessous de 0,6s). Un clip court → généralement 1–2 ; un long explicateur → ~un par section. Parmi plusieurs héros, le plus grand créé est l'APEX (lui seul obtient le lockup complet d'incrustation + élévation ajustée à la largeur) ; les plus petits sont des sommets MINEURS qui chevauchent leur colonne comme des lignes d'accentuation surdimensionnées (avant-plan, mouvement atténué) — tous les beats n'ont pas besoin de la vitrine matte, ce qui maintient précisément l'apex comme un événement. Incruster chaque mot est encore l'erreur courante.

Les identités de surface Rail construisent exactement cela (rail = rail.html, incrustation = le climax dans index.html). Les identités de flux en colonnes abandonnent le rail et font tout en style incrustation — recommandez-les uniquement pour les demandes d'ambiance plutôt que textuelles, jamais pour les explicateurs / voix off où les mots doivent être lus (CATALOG.md code cela par identité).


Étape 0 — choisir UNE identité du CATALOGUE

Un front-end, trois moteurs derrière. L'utilisateur choisit une IDENTITÉ dans CATALOG.md (35 entrées : 10 classiques + 25 thématiques) ; le moteur, le compilateur et le fichier de création sont dérivés par recherche à partir de la ligne du catalogue. Ne posez jamais la question "Standard vs Cinématographique vs Thème" — ce sont des noms de backend (un produit a une seule UX même avec plusieurs moteurs). Le catalogue code tout ce dont l'acheminement a besoin : surface de lecture, voix, recommandation-pour, besoins de scène, notes d'adjacence pour les paires vraiment proches (loud↔ordnance, neon↔neonsign, cream↔stardust).

Le choix d'identité est une porte de préférence (../hyperframes-core/references/brief-contract.md § 1) : en mode autonome ("surprenez-moi" / "décidez pour moi"), choisissez dans votre shortlist vous-même et énoncez le pourquoi en une ligne au lieu de demander.

Procédure : analysez le clip → shortlistez 2–3 identités du catalogue → recommandez-en UNE avec un pourquoi en une ligne → l'utilisateur choisit (mode autonome : vous choisissez, en énonçant le pourquoi) → créez le fichier de cette identité. Les identités sont verrouillées par moteur (pas de combinaisons croisées ; en ouvrir une est un événement de validation — voir dna/README.md).

Présentez toujours votre recommandation et laissez l'utilisateur choisir avant de créer. Ne passez pas silencieusement au défaut.

(La table complète des identités se trouve dans CATALOG.md — source unique de vérité pour l'acheminement. Les documents du moteur ci-dessous décrivent le contrat de création de chaque backend.)

Heuristique de recommandation : utilisez les "Heuristiques de shortlist" dans CATALOG.md — elles sont au niveau de l'identité (par exemple "炸" shortliste ordnance/stomp/terminal/loud et choisit en fonction de QUOI doit exploser), jamais au niveau de la catégorie. Incertain → anchor.

  • Cinématographique → écrivez plan.json pour un modèle verrouillé, compilé par make-composition.cjs.
  • Thème → lisez themes/README.md, créez theme.json, exécutez scripts/render-theme.sh (compile + rend + réaction de plaque → final_fx.mp4).

Porte de décision — À EXÉCUTER EN PREMIER

Analysez la vidéo et classifiez la scène avant l'un ou l'autre mode.

ffprobe <video.mp4>                    # spécifications
ffmpeg -ss <t> -i <video.mp4> -vframes 1 echantillon.png   # à 20/50/80%

Lisez les échantillons. Refusez si :

  • Plusieurs locuteurs / coupures franches (divisez et rendez chaque plan, ou refusez)
  • Pas de sujet humain (cette compétence est pour la tête parlante)
  • Moins de 3 secondes, pas de parole, ou le visage n'est jamais clairement visible — transcribe.cjs prévient lorsque l'audio est quasi silencieux (Whisper hallucine des mots comme "Merci." sur le silence) ; tenez-en compte et refusez plutôt que de légender des mots fabriqués
  • La source a déjà des légendes/sous-titres/éléments graphiques textuels incrustés — l'ajout d'un deuxième système de légende entre en conflit et la vidéo est livrée intacte (pas de recouvrement/remplacement). Le texte incrusté apparaît souvent seulement au milieu du clip : échantillonnez une planche contact à 1ips (ffmpeg -i entree.mp4 -vf "fps=1,scale=160:-1,tile=10x5" planche.png), ne vous fiez pas à 3 images ponctuelles.
  • La transcription est défectueuse — la parole non native/fortement accentuée peut être transcrite en charabia confiant. Lisez transcript.json avant de créer ; si cela ne ressemble pas à une langue, essayez WHISPER_MODEL=medium une fois, sinon refusez (un rail textuel de mots fabriqués est pire que pas de légendes).
  • Mouvement rapide agité (le matte scintille)

Sondages de pré-vol (ne coûtent rien, préviennent les pires échecs)

  1. Sondage de coupure de plan. Échantillonnez les images à 20%, 50%, 80%. Si un sujet/scène différent apparaît, recadrez le clip avant la coupure.
  2. Sondage de letterbox / pillarbox. Barres noires sur la première image ? Calculez le rectangle de contenu sûr et contraignez le placement des légendes à l'intérieur.
  3. Sondage de luminance. Échantillonnez la luminance moyenne de la région de légende — sous 60 → le texte clair se lit tel quel, 60-180 → ajoutez le voile de glyphe, 180+ → texte opaque + voile (jamais de texte clair nu). Les modèles cinématographiques sont crème+écran et VERROUILLÉS — utilisez ce sondage pour choisir une identité adaptée (scènes lumineuses → ink, ou le thème anchor à rail opaque), jamais pour recoloriser une.
  4. Recommandation d'identité par ton (vous recommandez ; l'utilisateur choisit — voir Étape 0 + CATALOG.md). explicateur / interview / mots à lire absolument → identités de surface rail/panneau ; poétique / social / "cinématographique" → identités de flux en colonnes par registre ; "炸 / 特效 / VFX" / mondes nommés → identités thématiques. En cas d'incertitude → anchor (les mots se lisent, la scène est sûre) — mais présentez une shortlist et laissez l'utilisateur choisir.

Pipeline — 5 étapes

1. hyperframes init <projet> --non-interactive --video <video.mp4> --skill=embedded-captions
2. bash scripts/prepare.sh <projet>       # matte ∥ transcription (parallèle) → zones de sécurité. Une commande.
                                           #   → frames_fg/ transcript.json safe-zones.json
3. [ÉTAPE AGENT — la seule étape créative] créez un petit JSON ; voir ci-dessous par mode
   Cinématographique : créez plan.json → node scripts/fill-timings.cjs → fit-fonts.cjs → make-composition.cjs
   Thème :            créez theme.json → bash scripts/render-theme.sh <projet>   (compile + rend + effets de plaque)
4. node scripts/preview-frames.cjs <projet>   # ~2s/image d'aperçus composites → § QA visuelle (AVANT le rendu)
5. bash scripts/render-and-composite.sh <projet>  # portes → final.mp4 + historique/ instantané
   (Mode Thème : IGNOREZ les étapes 3b/5 — render-theme.sh exécute déjà la compilation + le rendu-et-composite
    + _postfx.sh ; le livrable est final_fx.mp4, final.mp4 est avant la réaction de plaque)

L'étape 1 init vérifie les compétences installées par rapport aux dernières sur GitHub et met à jour l'ensemble global si l'une d'elles est obsolète.

L'étape 3 diffère selon le mode :

Étape 3 — Mode Cinématographique (incrustation pure)

  1. Lisez safe-zones.json en premier. Les plans de narration vont dans zones.hugLeft/hugRight — bandes propres CONTRE la silhouette (le texte loin du corps se lit comme flottant, pas incrusté ; les coins éloignés sont le repli, pas le défaut). Le héros par défaut va dans heroAnchor/heroBands.best (centré SUR le sujet, ~30–55% occlus). recommendation:"fg" déplace la NARRATION devant pour la lisibilité ; le héros reste incrusté tant que heroBands.feasible — héros-fg est le dernier recours.
  2. L'ADN est l'identité que vous avez choisie à l'Étape 0 (CATALOG.md) — ne rouvrez pas le choix ici. Vérifiez-le par rapport à la scène (luma de bande héroïque brillante > 150 veut ink ; les conseils de choix complets se trouvent dans le catalogue, couvrant les dix incluant neon / glitch / chrome / velocity). Énoncez votre choix + pourquoi ; l'utilisateur décide. L'ADN verrouille le type/la palette/le mélange/le mouvement + l'acte héroïque en trois parties ; les zones de sécurité v2 (palette/optique/éclairage) le paramètrent pour CETTE scène automatiquement.
  3. Créez <projet>/cinematic.json — "dna": "<nom>" + BLOCS de pensée, pas de groupes bruts : chaque bloc = lignes de mots (groupés 2–5 aux limites de propositions) + le plan dans lequel il s'empile + css par ligne (taille/poids/style uniquement — pas de positions) + au plus UNE ligne marquée "hero": true (le mot promu ; "text" pour la forme d'affichage). Schéma : en-tête de scripts/make-cinematic.cjs.
  4. Compilez : node scripts/make-cinematic.cjs <projet> — abaisse les blocs → plan.json → index.html. Généré pour vous : timings séquencés par transcription, accumulation au sein du bloc, page-turn entre les blocs, le LOCKUP du héros (le pré-contexte d'un bloc héros, le HÉROS et le post-contexte s'empilent comme une seule composition liée centrée sur le sujet — ordre de lecture haut→bas = ordre parlé par construction ; le contexte flotte DEVANT pendant que le héros s'incruste DERRIÈRE = le sandwich de profondeur ; une règle de masse maintient le héros dominant son contexte ; division apex/héros mineur, ordre de lecture par construction, repli fg selon les zones de sécurité. Ensuite, les portes s'exécutent comme d'habitude. (La création manuelle de plan.json directement reste possible pour les conceptions que les blocs ne peuvent pas exprimer — exécutez ensuite fill-timings.cjs + fit-fonts.cjs + make-composition.cjs vous-même.)

Étape 3 — Mode Thème (constitution thématique)

Lisez themes/README.md EN PREMIER — registres de paradigme/pièce maîtresse, liaisons, règles strictes et le schéma exact de theme.json.

  1. Choisissez un ADN de thème par registre de contenu (chaque themes/<nom>.json a voix + quand). Énoncez votre choix + pourquoi ; l'utilisateur décide.
  2. Créez <projet>/theme.json — dna, lines (textuel, ordre de transcription ; 1...

Individual skills in this repo

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

faceless-explainer

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.

figma

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.

general-video

>

hyperframes

>

hyperframes-animation

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

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

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

hyperframes-keyframes

>

hyperframes-registry

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

jasonfast123/hyperframes-skills

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.

media-use

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.

motion-graphics

>

music-to-video

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.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

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

Skills associés