Convierte Ilustraciones de Cuentos Hechas a Mano en Videos de 35 a 45 Segundos con Revelado de Líneas Usando HyperFrames
Aprende cómo transformar de 7 a 9 ilustraciones de cuentos hechas a mano en un video vertical de 35 a 45 segundos con efectos de revelado de líneas y coloreado gradual usando HyperFrames.
Introducción
Crear videos cortos atractivos a partir de ilustraciones hechas a mano puede ser un proceso tedioso, especialmente cuando se busca un efecto pulido de revelado de líneas y coloreado gradual. El proyecto de código abierto handdraw-story-video de xiejunjie524 simplifica este flujo de trabajo, permitiéndote convertir de 7 a 9 ilustraciones de cuentos hechas a mano en un video vertical de 35 a 45 segundos con un suave revelado de líneas de izquierda a derecha seguido de un relleno de color gradual.
Esta herramienta está construida sobre HyperFrames, un marco para generar animaciones cuadro por cuadro, y utiliza GSAP para el control de animaciones. Está diseñada para desarrolladores y creadores de contenido que desean automatizar el pipeline de producción de videos para cuentos dibujados a mano.
Características Clave
- Salida Predeterminada: 40 segundos, resolución 720×960, 30 fps — optimizada para plataformas verticales como TikTok, Instagram Reels y YouTube Shorts.
- Imagen Fuente Única: Cada escena utiliza una ilustración a color independiente. La herramienta extrae localmente una versión de arte lineal perfectamente alineada.
- Dirección de Animación Consistente: Tanto el arte lineal como el relleno de color progresan de izquierda a derecha, evitando llamadas repetidas a modelos de generación de imágenes.
- Subtítulos Opcionales: Soporta subtítulos de la historia y elementos de texto dentro de la escena.
- Validación Automática: Verifica duración, activos duplicados, cantidad de líneas de subtítulos y rango de tamaño de fuente.
- Sin Dependencia de Proveedor: No está vinculado a ningún servicio específico de generación de imágenes, fuente de música o API privada.
Requisitos Previos
Antes de comenzar, asegúrate de tener instalado lo siguiente:
- Python 3.10+
- Node.js 18+
- FFmpeg
- HyperFrames
- GSAP 3 (instalado vía npm, sujeto a su licencia)
Inicio Rápido
1. Clonar el Repositorio
git clone https://github.com/xiejunjie524/handdraw-story-video.git
cd handdraw-story-video
2. Configurar un Entorno Virtual
python -m venv .venv
# En Windows:
.venv\Scripts\activate
# En macOS/Linux:
source .venv/bin/activate
3. Instalar Dependencias
pip install -r requirements.txt
npm install gsap
4. Crear una Configuración de Historia
Copia la plantilla y completa los detalles de tu historia:
cp templates/story-template.json story.json
5. Preparar tus Ilustraciones
Para cada escena, necesitas una única ilustración a color de 1K. Luego extrae el arte lineal:
python scripts/make_lineart.py assets/images/scene-01-color.png assets/images/scene-01-line.png
6. Configurar HyperFrames y GSAP
mkdir -p hyperframes/assets/vendor
cp node_modules/gsap/dist/gsap.min.js hyperframes/assets/vendor/gsap.min.js
Para 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. Generar el Video
Coloca tus imágenes y música de fondo (con la licencia adecuada) en hyperframes/assets/, asegúrate de que las rutas coincidan con tu story.json, luego ejecuta:
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
Importante: No sobrescribas renders antiguos; usa un nuevo nombre de archivo de salida cada vez.
Configuración de la Historia
Una configuración mínima de escena se ve así:
{
"id": "scene-1",
"duration": 5,
"caption_lines": ["A las cuatro de la madrugada,", "él siempre pasaba por esa tienda de desayunos."],
"line_image": "assets/images/scene-01-line.png",
"color_image": "assets/images/scene-01-color.png",
"crop": {"scale": 1, "x": 0, "y": 0}
}
Para una referencia completa de campos y reglas de guion gráfico, consulta docs/story-spec.md. Un ejemplo ejecutable está disponible en examples/soy-milk-at-4am/story.json.
Pautas de Composición de Escenas
Para lograr los mejores resultados visuales, sigue estas pautas:
- Cantidad de Escenas: 8 escenas, cada una de aproximadamente 5 segundos. Cada escena debe tener una composición distinta — no dependas del recorte o escalado para llenar el tiempo.
- Ubicación del Sujeto: El sujeto principal debe estar en el 45%–55% inferior del cuadro, dejando amplio espacio en blanco (fondo similar al papel).
- Complejidad: Máximo 2–3 personajes por cuadro, con dos anclajes de fondo clave. Evita multitudes, edificios densos o líneas negras grandes.
- Subtítulos: Máximo 3 líneas, cada una de no más de ~18 caracteres chinos.
- Música: Elige música que se ajuste a la historia; no codifiques un BGM específico en la plantilla.
Integración de Habilidades Codex
La raíz del repositorio está estructurada como una Habilidad Codex. Puedes copiarla o enlazarla a $CODEX_HOME/skills/handdraw-good-deed-story y luego activarla con un prompt como "Crea una historia conmovedora de 40 segundos con revelado de líneas y coloreado gradual."
Licencia y Atribución
- Código: Publicado bajo la Licencia MIT.
- Activos de Terceros: Las imágenes generadas, fuentes, GSAP, música y otros materiales de terceros no están cubiertos automáticamente por la licencia MIT. Debes cumplir con sus respectivas licencias y términos.
- Sin Secretos Incluidos: El repositorio no contiene claves API, sesiones de navegador, videos de referencia, música descargada o historial completo de renders.
Conclusión
El proyecto handdraw-story-video proporciona un pipeline de código abierto optimizado para crear videos atractivos de cuentos dibujados a mano. Al automatizar la extracción de arte lineal, la dirección de animación y la validación, ahorra tiempo y esfuerzo significativos. Ya seas un desarrollador que busca integrar esto en un flujo de trabajo más grande o un creador de contenido que desea producir videos consistentes y de alta calidad, esta herramienta es una base sólida.
Comienza clonando el repositorio, preparando tus ilustraciones y siguiendo la guía de inicio rápido. Con un poco de configuración, puedes convertir tus cuentos dibujados a mano en videos cortos pulidos listos para redes sociales.