Installation du plugin : Avant les commandes de configuration ou de mise à jour, suivez les règles d'installation du plugin lorsque ce skill se trouve à l'intérieur d'un plugin HyperFrames. Les installations autonomes conservent les instructions de mise à jour ci-dessous.
Tout d'abord, gardez ce skill à jour — confirmez avec l'utilisateur avant d'exécuter :
npx hyperframes skills update remotion-to-hyperframes. Une opération rapide sans effet si tout est à jour ; sinon, il rafraîchit ce skill ainsi que les skills de base dont il dépend avant de les utiliser.
Remotion vers HyperFrames
La porte d'entrée est
/hyperframes. Utilisez ceci uniquement pour porter une composition source Remotion (React) existante vers HyperFrames, dans un seul sens. Créer une nouvelle composition, recréer à partir d'une source non-Remotion (After Effects, Framer Motion, React simple / CSS — il n'y a pas de source Remotion à traduire), une simple mention de Remotion, ou toute incertitude → lisez/hyperframesd'abord : la couche d'intention contrôle chaque décision de route.
Aperçu
Traduire des compositions vidéo Remotion (basées sur React) en compositions HyperFrames (HTML + GSAP). La plupart des idiomes Remotion ont des équivalents directs dans HyperFrames — la traduction est mécanique pour ~80% des compositions typiques. Ce skill encode le mappage et se prémunit contre les 20% sujets à perte en refusant de traduire les motifs qui ne correspondent pas au modèle piloté par la recherche d'HyperFrames et en recommandant plutôt le modèle d'interopérabilité runtime de PR #214.
Le skill est livré avec un corpus de tests à plusieurs niveaux (T1–T4, 4 dispositifs au total) qui évalue les traductions par rapport à des seuils SSIM mesurés. Ne traduisez pas sans exécuter l'évaluation — une traduction qui « a l'air correcte » mais rend un SSIM 0,05 inférieur à la ligne de base validée est silencieusement erronée.
Quand l'utiliser
Utilisez ce skill UNIQUEMENT lorsque l'utilisateur demande explicitement de migrer depuis Remotion. Exemples de phrases déclencheurs :
- « porte mon projet Remotion vers HyperFrames »
- « convertis ce code Remotion en HyperFrames »
- « migrer depuis Remotion »
- « traduis cette composition Remotion »
- « réécris ceci en HTML HyperFrames »
N'utilisez PAS ce skill lorsque :
- (a) L'utilisateur crée une nouvelle composition HyperFrames, même s'il a ou teste une vidéo Remotion similaire.
- (b) L'utilisateur mentionne Remotion en passant sans demander de migration.
- (c) L'utilisateur partage du code Remotion comme matériel de référence plutôt que de demander une traduction.
- (d) L'utilisateur demande « la même vidéo que ma Remotion » sans demander explicitement de migrer la source — traitez cela comme une nouvelle construction HyperFrames.
NON PRIS EN CHARGE (refusez — ce n'est pas ce que fait ce skill) :
- La direction inverse. Exporter une composition HyperFrames vers Remotion (ou vers tout autre framework) n'est pas un workflow — la traduction est Remotion → HyperFrames uniquement. Dites-le clairement.
- Sources non-Remotion. Un projet After Effects (
.aep), une animation Framer Motion / React simple / CSS, ou toute autre source d'outil n'est pas une composition Remotion — il n'y a pas de source Remotion à traduire. Recréez-la nativement via/general-video, ou refusez si HyperFrames ne peut pas la représenter.
En cas de doute, par défaut, créez une composition HyperFrames native avec /general-video (le flux de création général HyperFrames).
Workflow
Étape 1 : Analyser la source (lint)
Exécutez scripts/lint_source.py sur le répertoire source Remotion. L'analyse détecte les motifs qui ne peuvent pas être traduits proprement :
- Bloquants (refusez + recommandez l'interopérabilité) :
useState,useReducer,useEffect/useLayoutEffectavec dépendances non vides,calculateMetadataasynchrone, bibliothèques d'interface utilisateur React tierces (MUI, Chakra, Mantine, antd, shadcn, Radix, NextUI). - Avertissements (traduisez après avoir supprimé la construction) : configuration
@remotion/lambda,delayRender,useCallback,useMemo, hooks personnalisés. - Infos (traduisez avec une note) :
staticFile,interpolateColors.
Si un bloqueur se déclenche, arrêtez-vous. Lisez references/escape-hatch.md et affichez le message de recommandation. Les avertissements n'arrêtent pas la traduction — supprimez la construction incriminée à l'étape 3 et notez l'écart dans TRANSLATION_NOTES.md. La configuration @remotion/lambda est le cas d'avertissement canonique : le skill supprime l'importation + les appels renderMediaOnLambda(...) mais traduit le reste de la composition.
Étape 2 : Planifier la traduction
Lisez references/api-map.md — l'index de chaque API Remotion et son équivalent HF ou référence par sujet. Identifiez les références thématiques dont vous aurez besoin en fonction de ce que la source utilise :
| La source contient | Charger la référence |
|---|---|
Composition, defaultProps, schema, calculateMetadata | parameters.md |
Sequence, Series, Loop, AbsoluteFill, Freeze | sequencing.md |
useCurrentFrame, interpolate, spring, Easing, interpolateColors | timing.md |
Audio, Video, Img, IFrame, staticFile, delayRender | media.md |
TransitionSeries, @remotion/transitions | transitions.md |
@remotion/lottie | lottie.md |
@remotion/google-fonts/<Family>, Font.loadFont, @font-face | fonts.md |
Ne les chargez pas tous — chargez seulement ce dont la source spécifique a besoin.
Recherchez le catalogue en ligne pour tout effet visuel que le tableau ne mappe pas. Lorsque la source peint un look sans équivalent API HF — un overlay de lignes de balayage/CRT, un passage de glitch ou d'aberration chromatique, un fondu shader, un traitement de grain de film — exécutez npx hyperframes catalog --query "<l'effet, en anglais simple>" --json avant de l'écrire manuellement en GSAP. La recherche n'a besoin de rien d'installé : pas de projet, pas de add préalable, pas de compte. Elle classe l'ensemble du registre hébergé (~400 blocs et composants) depuis n'importe quel répertoire, et transitions.md emprunte déjà cette voie pour clockWipe() / iris() via npx hyperframes add sdf-iris. Un composant réel est plus proche de la source qu'une approximation manuelle, donc il augmente généralement le SSIM plutôt que de le diminuer — mais la différence de rendu à l'étape 4 est toujours l'arbitre. Écrivez l'effet manuellement lorsque la recherche ne renvoie rien qui convient, et enregistrez la substitution dans TRANSLATION_NOTES.md dans les deux cas.
Étape 3 : Générer la composition HF
Émettez index.html avec :
<div id="stage">racine portant les attributsdata-composition-id,data-start="0",data-duration(en secondes),data-fps,data-width,data-height, plus undata-*par propriété scalaire.- Un
<div>hôte par scène avecdata-composition-src="compositions/<scene>.html"etdata-start/data-duration/data-track-index. La racine ne contient aucune mise en page imbriquée. - Un
compositions/<scene>.htmlpar scène (une sous-composition<template>) : son<style>en ligne pour la mise en page (CSS définit l'étatfromde chaque propriété animée), son balisage, et unegsap.timeline({paused: true})dans le temps local de la scène. Chaque dérivationuseCurrentFrame()de Remotion devient une interpolation sur cette timeline au décalage dans la scène. window.__timelines["<scene-id>"] = tl;dans chaque fichier de scène, etwindow.__timelines["<composition-id>"]pour la timeline propre de la racine (éventuellement vide).
Les sous-composants React personnalisés sont intégrés en HTML répété en utilisant l'interface de propriétés comme modèle (voir parameters.md pour le motif data-* par instance).
Étape 4 : Valider
Exécutez le harnais d'évaluation — references/eval.md pour le guide complet. Chemin rapide :
# Rendre la ligne de base Remotion (après npm install dans le dispositif)
cd remotion-src && npx remotion render <CompositionId> out/baseline.mp4
# Rendre la traduction HF
cd ../hf-src && npx hyperframes render --skill=remotion-to-hyperframes --output ../hf.mp4
# Différence SSIM
../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff
Seuil : ~0,02 en dessous de p05 du niveau de complexité de la source (voir le tableau des seuils validés dans eval.md). Si la différence échoue, exécutez scripts/frame_strip.sh pour voir quelles images ont divergé, puis relisez la référence de timing/séquençage/média pertinente.
Critique : les deux rendus doivent utiliser un format de pixel correspondant. Définissez Config.setVideoImageFormat("png") + Config.setColorSpace("bt709") dans remotion.config.ts de la source Remotion — sinon la différence mesure les différences d'encodeur (~0,05 de perte SSIM), et non la fidélité de la traduction.
Étape 5 : Documenter les écarts
Tout ce qui n'a pas été traduit proprement (rampes de volume supprimées, présentations personnalisées approximées, polices substituées) reçoit un TRANSLATION_NOTES.md écrit à côté de la sortie HF. Voir references/limitations.md pour le format.
Ce que ce skill ne fait PAS explicitement
- Traduire les machines d'état React. Les compositions qui pilotent l'animation via
useState+useEffectne sont pas des cibles de capture d'image déterministes dans le modèle piloté par la recherche d'HyperFrames. Recommandez le modèle d'interopérabilité runtime. - Exécuter le pipeline de rendu Remotion parallèlement à HyperFrames. C'est le modèle d'interopérabilité runtime de PR #214 — une solution séparée pour les compositions qui échouent à l'analyse de ce skill.
(@remotion/lambda n'est pas un bloqueur — la configuration Lambda est du déploiement, pas de l'animation. Le skill la supprime comme un avertissement et traduit le reste. Voir references/escape-hatch.md.)
Comment évaluer votre propre traduction
Exécutez l'orchestrateur du corpus de tests :
./assets/test-corpus/run.sh
Il exécute T1, T2, T3 (rendu + différence) et T4 (validation de l'analyse), affiche un tableau réussite/échec par niveau, et émet un rapport JSON agrégé. Utilisez-le pour vérifier que le skill fonctionne de bout en bout sur une extraction propre — et comme vérification de régression après avoir modifié une référence.
Ligne de base validée (au 27 avril 2026) :
| Niveau | Forme de la composition | SSIM moyen | Seuil |
|---|---|---|---|
| T1 | fondu d'entrée d'un élément unique | 0,974 | 0,95 |
| T2 | multi-scène + ressort + audio + image | 0,985 | 0,95 |
| T3 | piloté par données, sous-composants personnalisés, compteur | 0,953 | 0,90 |
| T4 | échappatoire (8 cas d'analyse) | 8/8 réussi | n/a |