superyhee/hypr-video-skills

Génération de vidéo via CLI

Référence rapide

# Rédiger la config → générer le JSON → rendre
node scripts/gen_canvas.mjs /tmp/video-<nom>.mjs /tmp/video-<nom>.json
npx hypr-video-cli /tmp/video-<nom>.json -o ./output/<nom>.mp4

Workflow

- [ ] Étape 1 : Lire les références et planifier les scènes
- [ ] Étape 2 : Construire la config et générer le JSON
- [ ] Étape 3 : Rendre et vérifier

Étape 1 — Lire les références et planifier les scènes

1a. Lisez ces références (toujours obligatoires) :

• gen-canvas.md — spécification de config : theme() (24 thèmes), 11 assistants de rôle, autoTracks(), animIn/animOut/kf en ligne, aides SVG, buildCanvas. Les pièges sont signalés par ⚠️.

1b. Planifiez les scènes : identifiez le type de vidéo, listez les noms/durées des scènes, choisissez les meilleures aides SVG par scène, choisissez les meilleurs éléments et emojis.

1c. Lisez les extras en fonction du plan :

Quand	Référence
Utilisation d'aides SVG (presque toujours)	svg-helpers.md — paramètres pour les 65 aides
Choix des polices	font-assets.md — 18 polices intégrées et associations
Ajout de décorations emoji/unicode	icons.md

Étape 2 — Construire la config et générer le JSON

2a. Rédigez un fichier de config .mjs. La config et le JSON vont dans /tmp/ — n'écrivez jamais dans examples/.

export default function build(h) {
  const {
    makeShape, makeEffect, buildCanvas, theme, autoTracks,
    svgVignette, svgDotGrid, svgGradientOrb, svgParticles,
    svgCheckMark, svgNumberCounter, // ...aides SVG selon besoin
  } = h;

  const t = theme("cyberpunk");  // 24 thèmes — couleurs + assistants de rôle + polices
  const MAX = 25000;

  // ── Calques globaux ──
  const g_dot = svgDotGrid("g_dot", { start: 0, end: MAX, opacity: 0.04, color: t.ACCENT });
  const g_vig = svgVignette("g_vig", { start: 0, end: MAX, opacity: 0.6 });

  // ── Scène 1 : Hero (0–7s) ──
  const s1_orb = svgGradientOrb("s1_orb", {
    x: 360, y: 60, w: 1200, h: 960, start: 0, end: 7500, opacity: 0.10, color: t.ACCENT,
  });
  const s1_title = t.hero("s1_title", "Product Name", {
    x: 160, y: 340, start: 0, end: 7000,
    animIn: ["blurIn", 1200], animOut: ["blurOut", 700],
    kf: { scale: { dur: 7000, amp: 0.02 } },
  });
  const s1_div = makeShape("s1_div", "rect", t.ACCENT, {
    x: 760, y: 510, w: 400, h: 3, start: 500, end: 6500,
    animIn: ["expandIn", 500], animOut: ["fadeOut", 300],
  });
  const s1_sub = t.subtitle("s1_sub", "Tagline goes here", {
    x: 260, y: 540, start: 700, end: 6500,
    animIn: ["fadeIn", 800], animOut: ["fadeOut", 500],
  });

  // ── Scène 2 : Features (6.5–16s) ──
  // ... d'autres scènes suivent le même modèle

  const elements = [g_dot, g_vig, s1_orb, s1_title, s1_div, s1_sub /* ... */];

  return buildCanvas({
    bg: t.BG, maxTime: MAX,
    // t.fonts est un OBJET { Montserrat: {...}, "Fira Code": {...}, ... } — PAS un tableau
    // Pour ajouter des polices supplémentaires (ex. CJK), utilisez la décomposition d'objet :
    fontAssets: {
      ...t.fonts,
      "Noto Sans SC": { url: "skill/assets/fonts/NotoSansSC-Variable.ttf", fileType: "ttf" },
    },
    elements, tracks: autoTracks(elements),
    fps: 30, quality: "medium",
  });
}

node scripts/gen_canvas.mjs /tmp/video-<nom>.mjs /tmp/video-<nom>.json

2b. Avant de rendre, vérifiez :

1. Tout le texte utilise les assistants de rôle (t.hero … t.eyebrow) — utilisez makeText brut uniquement pour une police/taille/couleur personnalisée (ex. blocs de code, CJK avec Noto Sans SC)
2. Chaque élément visible a animIn + animOut ; espacez de 300 à 500 ms entre les éléments
3. Opacité des SVG d'arrière-plan ≤ 0,15 ; 2 à 4 aides par scène ; les calques globaux couvrent 0–MAX
4. maxTime >= end du dernier élément

Étape 3 — Rendre et vérifier

npx hypr-video-cli /tmp/video-<nom>.json -o ./output/<nom>.mp4

Options CLI : --fps 24|30|60, --quality low|medium|high|very_high, --format mp4|mov|mp3, --width N, --height N, -q (silencieux).

Si le rendu échoue → consultez les ⚠️ pièges dans gen-canvas.md

Règles critiques

1. maxTime >= end du plus grand élément — trop petit = éléments coupés
2. Les fichiers de config vont dans /tmp/ — n'écrivez jamais dans examples/
3. Utilisez toujours l'API moderne — theme() + assistants de rôle + animIn/animOut/kf en ligne + autoTracks()
4. Structure des scènes — préfixez les IDs des éléments avec s1_/s2_… par scène ; utilisez des blocs de commentaires // ── Scène N : Titre (Xs–Ys) ──
5. Transitions nécessitent des éléments adjacents sur la même piste (préférez les coupures flash/glitch basées sur les effets)
6. Utilisez backgroundColor via bg: t.BG — pas une forme d'arrière-plan plein écran
7. Chemin de gen_canvas.mjs — exécutez depuis la racine de la compétence : node scripts/gen_canvas.mjs (PAS skill/scripts/)
8. t.fonts est un objet, pas un tableau — utilisez { ...t.fonts, "Police Suppl.": { url: "...", fileType: "ttf" } } pour ajouter des polices. N'utilisez jamais [...t.fonts] (décomposition de tableau)