ouerf-man/hand-drawn-video

Video dibujado a mano

Todo lo que aparece en pantalla está pintado por p5.brush (texturas realistas de bolígrafo, lápiz y acuarela, dibujadas en la GPU) dentro de un proyecto HyperFrames, y cada fotograma es una función pura del tiempo, por lo que el renderizado es exacto. Los casos de uso que se muestran a continuación son puntos de partida, no límites: cualquier idea dibujada a mano funciona. Las rutas en este archivo son relativas a la carpeta de este skill.

1. Configuración (una vez)

• Node.js 18+ (HyperFrames se ejecuta mediante npx).
• El Python del skill: ~/.cache/hand-drawn-video/venv/bin/python (Windows %USERPROFILE%\.cache\hand-drawn-video\venv\Scripts\python.exe), creado por el paso 5 de INSTALL.md con Python 3.10-3.12. Úsalo para cada comando a continuación. Si falta, ejecuta los pasos 4-7 de INSTALL.md. Nunca hagas pip install en el Python del sistema (el Python de Homebrew lo rechaza), y en Mac el comando es python3, no python.
• Internet: la primera vez, scripts/brushlib.py descarga p5.brush (versión fija, con verificación SHA-256) en kit/.cache/; cada proyecto obtiene una copia. Los renders también cargan GSAP desde cdn.jsdelivr.net, por lo que renderizar necesita internet.
• El caso de uso redibujar-video necesita más cosas (MediaPipe, ffmpeg): consulta su USECASE.md. Hecho cuando: npx --yes hyperframes --version imprime una versión y <skill Python> scripts/brushlib.py imprime p5.brush ... ok.

2. Elige el caso de uso

Caso de uso	Qué crea	Empieza con
explicador	Un sketchnote que explica pasos: dibujos a bolígrafo, flechas, aguadas, etiquetas escritas a mano, remate con rotulador rojo	usecases/explicador/
historia	Una historia corta animada: un personaje garabato que actúa (aplastamiento, anticipación, ojos, cejas), un mundo pintado en acuarela	usecases/historia/
redibujar-video	Un clip real de una persona redibujado 12 veces por segundo (grabado de pantalla o acuarela), con una transición de real a dibujado	usecases/redibujar-video/
blanco	Cualquier otra cosa, o un nuevo estilo: una línea de bolígrafo, una aguada, un tramado, escritura a mano y el kit de dibujo	usecases/blanco/

Lee el USECASE.md del caso de uso elegido (usecases/<nombre>/USECASE.md) antes de escribir nada. Si no está en la tabla: empieza desde blanco y lee references/p5brush-notes.md. Hecho cuando: el caso de uso está elegido y el contenido acordado (las palabras, los tiempos, la duración, 9:16 o 16:9).

3. Inicia el proyecto

<skill Python> scripts/new_project.py <caso de uso> "<Documentos>/<nueva carpeta>"

Coloca el proyecto en la carpeta Documentos del usuario (una ruta absoluta; en Windows puede estar dentro de OneDrive), nunca dentro de la carpeta del skill: actualizar el skill reemplaza esa carpeta. (--list muestra los casos de uso). redibujar-video es la excepción: ejecuta su propia herramienta (USECASE.md). Hecho cuando: la carpeta tiene index.html, assets/vendor/brush.js (p5.brush, parcheado para el lint de HyperFrames) y assets/fonts/.

4. Hazlo tuyo: reglas para un buen trabajo dibujado a mano

Estas reglas aplican para cada caso de uso y cada nuevo estilo.

1. Cada fotograma es una función pura del tiempo. renderAt(t) limpia y vuelve a pintar todo en cada hf-seek. Sin Math.random(), Date, temporizadores ni fotogramas de animación.
2. Una semilla por elemento (sd(id) antes de cada elemento). Un trazo que aún está creciendo no debe cambiar la textura de los trazos posteriores.
3. El bolígrafo guía, la pintura sigue. El contorno se dibuja primero; la aguada aparece justo después; el tramado se revela de izquierda a derecha con brush.clip. La pintura va debajo de las líneas en orden de pintura.
4. Dibuja a velocidad de mano. Un trazo tarda 0.2-0.8 s con entrada y salida lentas. La escritura a mano tarda unos 0.04 s por letra. Nada aparece de golpe.
5. Una familia de herramientas por video. Por ejemplo, bolígrafo + acuarela + un rotulador rojo. Tres o cuatro tintas más el color del papel. Rojo solo en lo único que se debe mirar.
6. Imperfecto, pero la misma imperfección en cada fotograma. Sobrepasa esquinas y ondula líneas con ruido senoidal fijo, nunca nueva aleatoriedad por fotograma. Excepción: un "hervor" deliberado (líneas que brillan), con una nueva semilla por dibujo, mantenido durante 2-3 fotogramas (8-12 dibujos por segundo).
7. Las formas simples se leen más rápido que el detalle. Un personaje es una cabeza círculo, ojos punto y una línea de boca; actúa con su cuerpo (aplastamiento, anticipación, seguimiento) y sus ojos y cejas.
8. Las palabras se escriben a mano, son cortas y están al lado del dibujo, nunca encima. La fuente del kit es Caveat (latín). Para árabe, añade una fuente árabe OFL a assets/fonts/ y declárala con @font-face.
9. Mantenlo corto y seguro. 5-12 s por clip. En 9:16, mantén los dibujos y palabras clave entre unos 170 px desde la parte superior y 400 px desde la inferior (botones de plataforma y subtítulos). Hecho cuando: la escena dice lo acordado y sigue las nueve reglas.

5. Verifica y renderiza

• npx --yes hyperframes lint: 0 errores. Una advertencia de "archivo demasiado grande" está bien para escenas de un solo archivo.
• npx --yes hyperframes preview para desplazarte, o renderiza y mira los fotogramas del principio, la mitad y el final.
• npx --yes hyperframes render . -o renders/video.mp4.
• Verifica los fotogramas contra las reglas del paso 4 y las comprobaciones propias del caso de uso; corrige y renderiza de nuevo. Hecho cuando: renders/video.mp4 existe y sus fotogramas pasan las comprobaciones.

6. Añade un caso de uso (extiende el skill)

Crea usecases/<nombre>/ con:

• index.html: una composición HyperFrames funcional que cargue assets/vendor/brush.js y las fuentes de assets/fonts/ (copia blanco para empezar).
• USECASE.md: cuándo usarlo, qué cambiar en la plantilla y sus propias comprobaciones. new_project.py lo encuentra automáticamente. Añade una fila a la tabla del paso 2.

Límites

• p5.brush necesita WebGL2: HyperFrames renderiza en Chrome, que lo tiene.
• Los rellenos de acuarela no pueden volverse completamente oscuros (como la acuarela real): usa una aguada para las zonas oscuras. Más trampas en references/p5brush-notes.md.
• El caso de uso de redibujado funciona mejor con una sola persona, de frente o en tres cuartos de perfil.