Transformez vos illustrations d'histoires dessinées à la main en vidéos de 35 à 45 secondes avec dévoilement de traits avec HyperFrames

Introduction

Créer des vidéos courtes attrayantes à partir d'illustrations dessinées à la main peut être un processus fastidieux, surtout lorsque vous souhaitez obtenir un effet de dévoilement de traits et de colorisation progressive soigné. Le projet open-source handdraw-story-video par xiejunjie524 simplifie ce flux de travail, vous permettant de transformer 7 à 9 illustrations d'histoires dessinées à la main en une vidéo verticale de 35 à 45 secondes avec un dévoilement de traits fluide de gauche à droite suivi d'un remplissage progressif des couleurs.

Cet outil est construit sur HyperFrames, un framework pour générer des animations image par image, et utilise GSAP pour le contrôle des animations. Il est conçu pour les développeurs et les créateurs de contenu qui souhaitent automatiser le pipeline de production vidéo pour les histoires dessinées à la main.

Fonctionnalités clés

Sortie par défaut : 40 secondes, résolution 720×960, 30 ips — optimisé pour les plateformes verticales comme TikTok, Instagram Reels et YouTube Shorts.
Image source unique : Chaque scène utilise une illustration couleur indépendante. L'outil extrait localement une version en traits parfaitement alignée.
Direction d'animation cohérente : Les traits et le remplissage de couleur progressent de gauche à droite, évitant les appels répétés aux modèles de génération d'images.
Sous-titres optionnels : Prend en charge les sous-titres d'histoire et les éléments textuels dans la scène.
Validation automatique : Vérifie la durée, les ressources en double, le nombre de lignes de sous-titres et la plage de tailles de police.
Pas de dépendance à un fournisseur : Ne lie pas à un service de génération d'images, une source musicale ou une API privée spécifique.

Prérequis

Avant de commencer, assurez-vous d'avoir installé les éléments suivants :

Python 3.10+
Node.js 18+
FFmpeg
HyperFrames
GSAP 3 (installé via npm, soumis à sa licence)

Démarrage rapide

1. Cloner le dépôt

git clone https://github.com/xiejunjie524/handdraw-story-video.git
cd handdraw-story-video

2. Configurer un environnement virtuel

python -m venv .venv
# Sur Windows :
.venv\Scripts\activate
# Sur macOS/Linux :
source .venv/bin/activate

3. Installer les dépendances

pip install -r requirements.txt
npm install gsap

4. Créer une configuration d'histoire

Copiez le modèle et remplissez les détails de votre histoire :

cp templates/story-template.json story.json

5. Préparer vos illustrations

Pour chaque scène, vous avez besoin d'une seule illustration couleur 1K. Extrayez ensuite les traits :

python scripts/make_lineart.py assets/images/scene-01-color.png assets/images/scene-01-line.png

6. Configurer HyperFrames et GSAP

mkdir -p hyperframes/assets/vendor
cp node_modules/gsap/dist/gsap.min.js hyperframes/assets/vendor/gsap.min.js

Pour Windows PowerShell :

New-Item -ItemType Directory -Force hyperframes/assets/vendor | Out-Null
Copy-Item node_modules/gsap/dist/gsap.min.js hyperframes/assets/vendor/gsap.min.js

7. Générer la vidéo

Placez vos images et votre musique de fond (avec les licences appropriées) dans hyperframes/assets/, assurez-vous que les chemins correspondent à votre story.json, puis exécutez :

python scripts/build_story.py story.json hyperframes/index.html --check-assets
npx hyperframes check hyperframes/index.html --json
npx hyperframes render hyperframes/index.html --output renders/story-v1.mp4 --workers 1

Important : Ne remplacez pas les anciens rendus ; utilisez un nouveau nom de fichier de sortie à chaque fois.

Configuration de l'histoire

Une configuration de scène minimale ressemble à ceci :

{
  "id": "scene-1",
  "duration": 5,
  "caption_lines": ["À quatre heures du matin,", "il passait toujours devant ce petit-déjeuner."],
  "line_image": "assets/images/scene-01-line.png",
  "color_image": "assets/images/scene-01-color.png",
  "crop": {"scale": 1, "x": 0, "y": 0}
}

Pour une référence complète des champs et les règles de storyboard, consultez docs/story-spec.md. Un exemple exécutable est disponible dans examples/soy-milk-at-4am/story.json.

Directives de composition des scènes

Pour obtenir les meilleurs résultats visuels, suivez ces directives :

Nombre de scènes : 8 scènes, chacune d'environ 5 secondes. Chaque scène doit avoir une composition distincte — ne comptez pas sur le recadrage ou le redimensionnement pour remplir le temps.
Placement du sujet : Le sujet principal doit se trouver dans les 45 % à 55 % inférieurs du cadre, laissant un espace blanc ample (fond de type papier).
Complexité : Maximum 2 à 3 personnages par cadre, avec deux points d'ancrage d'arrière-plan clés. Évitez les foules, les bâtiments denses ou les grandes lignes noires.
Sous-titres : Maximum 3 lignes, chacune ne dépassant pas environ 18 caractères chinois.
Musique : Choisissez une musique qui correspond à l'histoire ; ne codez pas en dur une BGM spécifique dans le modèle.

Intégration de la compétence Codex

La racine du dépôt est structurée comme une compétence Codex. Vous pouvez la copier ou la lier à $CODEX_HOME/skills/handdraw-good-deed-story, puis la déclencher avec une invite comme "Créez une histoire réconfortante de 40 secondes avec dévoilement de traits et colorisation progressive."

Licence et attribution

Code : Publié sous licence MIT.
Ressources tierces : Les images générées, polices, GSAP, musique et autres matériels tiers ne sont pas automatiquement couverts par la licence MIT. Vous devez vous conformer à leurs licences et conditions respectives.
Aucun secret inclus : Le dépôt ne contient pas de clés API, sessions de navigateur, vidéos de référence, musique téléchargée ou historique complet des rendus.

Conclusion

Le projet handdraw-story-video fournit un pipeline open-source rationalisé pour créer des vidéos d'histoires dessinées à la main attrayantes. En automatisant l'extraction des traits, la direction de l'animation et la validation, il permet d'économiser un temps et des efforts considérables. Que vous soyez un développeur cherchant à intégrer cela dans un flux de travail plus large ou un créateur de contenu souhaitant produire des vidéos cohérentes et de haute qualité, cet outil constitue une base solide.

Commencez par cloner le dépôt, préparer vos illustrations et suivre le guide de démarrage rapide. Avec un peu de configuration, vous pouvez transformer vos histoires dessinées à la main en vidéos courtes et soignées prêtes pour les réseaux sociaux.

Source

xiejunjie524/handdraw-story-video : Transformez les illustrations d'histoires dessinées à la main en vidéos de 35 à 45 secondes avec dévoilement de traits et colorisation progressive avec HyperFrames.