¿Qué hace sourceframe?

Un método para hacer un video como construirías un sistema: primero los requisitos, un libro de lo que es verdad, un contrato de diseño, pequeños pasos verificados, medición antes que opinión. El producto es un video corto (15 a 90 segundos) que explica un mecanismo siguiendo un único elemento focal a través de él. El nombre es la regla: cada fotograma se remonta a una fuente.

Este skill se destiló de una construcción real (un video explicativo de 77 segundos sobre cómo coreboot ejecuta código C antes de que exista la DRAM, con una cuadrícula de caché de 4.096 celdas, un chip flash 3D y entrenamiento de DRAM) y se volvió a probar en un segundo tema no relacionado (examples/merkle-proof, una prueba de inclusión Merkle donde cada hash es calculado por la compilación). Las rutas a continuación son relativas a la carpeta de este skill.

Cuándo usarlo, cuándo no

Úsalo para: videos de cómo funciona, tutoriales de protocolos o algoritmos, recorridos de arquitectura de sistemas, secuencias de "qué sucede cuando", repeticiones de análisis post-mortem. Brilla cuando el tema tiene un mecanismo con un estado que cambia (bits que se voltean, un puntero que se mueve, un hash que se propaga).

No lo uses para: ediciones de cabezas parlantes o material de archivo, anuncios de productos, branding de movimiento puro, cualquier cosa donde el contenido sea opinión en lugar de mecanismo. Para esos casos, usa un skill de movimiento simple. Si el usuario solo quiere un carrusel estático, usa un skill de carrusel.

Los siete principios

Libro mayor antes que píxeles. Escribe FACTS.md (afirmación, evidencia, estado) antes de la primera escena. Estado V leído de una fuente en esta sesión, C calculado por la compilación, S esquemático y etiquetado en pantalla, H memoria (volver a verificar), N necesita fuente (bloquea el envío). Nunca inventes un número, un símbolo, una ruta, una versión. Prefiere C: deja que la compilación calcule lo que muestra el video.
Un elemento focal. Una cosa por fotograma es el ancla visual: recibe el único color de "enfoque", siempre es el paso actual y nunca compite con un segundo. Todo lo demás es más silencioso por construcción.
El color es significado. Los roles de la paleta (data, focus, ok, bad, ink) son semánticos y fijos para todo el video. Nunca elijas un tono por estética.
Determinismo. Un fotograma es una función pura de su número de fotograma. Sin tiempo de reloj, sin Math.random, sin transiciones CSS, sin useFrame. Usa hash(n) con semilla para cualquier cosa pseudoaleatoria. Esto es lo que hace posible el renderizado paralelo, las imágenes fijas y la sincronización de sonido posterior.
La imagen es el instrumento. La animación existe para mostrar un cambio de estado. Cada movimiento responde "¿qué muestra esto?". Prohibido: el mismo fundido en cada bloque, rebote o easing elástico, decoración en bucle, brillo por sí mismo.
Mide primero, mira después. Los números son baratos y exactos; las opiniones son caras. Verificación de tipos, lint del libro mayor, inspección del contenedor, mide píxeles cuando puedas, luego mira una hoja de contacto por ronda.
Reglas de parada. Máximo tres rondas de revisión por conjunto de escenas, máximo tres correcciones por ronda. Di lo que queda y por qué te detuviste. La honestidad supera al pulido: etiqueta lo que no se verificó.

Las diez fases

Cada fase tiene un entregable y una puerta de control. No te saltes una puerta para ahorrar tiempo: los errores costosos están todos aguas arriba.

#	fase	entregable	puerta de control
0	ingesta	verificación de idoneidad en una línea, plataforma, duración, sin sonido o con sonido	pregunta solo lo que bloquea el trabajo (una pregunta), de lo contrario decide y declara
1	brief	`BRIEF.md` secciones 1 a 3	la conclusión cabe en una oración; el elemento focal se nombra en una frase
2	evidencia	`FACTS.md` completado para cada afirmación planificada; scripts de cálculo para filas `C`	`tools/ledger_lint.py` pasa; sin fila `N`
3	dirección	lista de descartes, frase idea, momento emblemático, tokens de `theme.ts`	prueba de competencia superada (ver `references/02-direction.md`)
4	guion gráfico	tabla: escena, segundos, qué se mueve, título, fila del libro mayor; `timeline.json`	presupuesto de título cumplido; longitud total justificada
5	fundamentos	proyecto esqueleto, fuentes, tema, shell, cámara, vista previa abierta	se renderiza una imagen fija; WebGL funciona (ver errores comunes: longitud de ruta)
6	construcción	escenas, la más difícil y central primero	por escena: imágenes fijas, una hoja de contacto, máximo 3 correcciones
7	activos	activos 3D e iconos, procedurales a menos que se necesite una fuente con licencia	cada logotipo o marca usado sin alteraciones y acreditado
8	verificación	render completo, codificación, inspección, hoja de fotogramas, lint del libro mayor	todas las comprobaciones automáticas en verde; hoja revisada; fallos listados
9	entrega	mp4, fotograma de portada, texto del título, texto alternativo, créditos, lista "no verificado"	el usuario puede publicarlo sin preguntar qué es verdad

Fase 0: ingesta

Declara en una línea lo que harás: Leyendo esto como: <medio> para <lector>, <elemento focal>, <duración>. Haz una pregunta solo si la respuesta cambia lo que construyes (plataforma y relación de aspecto; si el sonido vendrá después; qué fuentes son autoritativas). Lienzo predeterminado 1080 x 1350 (4:5) a 30 fps para redes sociales; ver references/08-adapting.md para 16:9, 1:1, 9:16.

Fase 1: brief

Copia templates/starter/BRIEF.md. Completa la intención (medio, lector, conclusión, elemento focal, estado de ánimo). La conclusión debe ser una oración que un espectador pueda repetir. Si no puedes nombrar el elemento focal en una frase, aún no tienes un video: decide y dilo, o haz una pregunta.

Fase 2: evidencia (la parte que la mayoría de los videos omiten)

Identifica las fuentes primarias (especificación, RFC, árbol de código fuente, hoja de datos, página man, salida medida). Lee las líneas exactas que citarás. Registra archivo:línea o URL más sección.
Para cada número, pregúntate: ¿puede la compilación calcularlo? Si es así, escribe un script que lo calcule, lo verifique de una segunda manera, se detenga en caso de desacuerdo y escriba un módulo generado que las escenas importen (examples/merkle-proof/scripts/compute.mjs es el modelo: la recursión de RFC versus la compilación iterativa deben estar de acuerdo o no se escribe nada).
Cualquier cosa que no pueda tener fuente se convierte en un esquema etiquetado (S, y la palabra "esquema" aparece en pantalla) o se elimina. Se permite [NECESITA FUENTE] visible en borradores, nunca en el render final.
Los datos ilustrativos son legales cuando son honestos: los elementos de ejemplo inventados se muestran como texto de ejemplo simple y se registran como S.
Ejecuta python tools/ledger_lint.py como un comprobador: cada dígito en una cadena de escena debe aparecer en el libro mayor.

Formato completo y ejemplos: references/01-brief-and-ledger.md.

Fase 3: dirección

Escribe la frase idea: "En este video, [algo que pertenece al tema] se convierte en [el dispositivo]." Realiza la prueba de competencia: si un video genérico sobre el tema pudiera usar la misma frase, es una idea de categoría, no una idea. Elige un momento emblemático (el único movimiento destacado) y la lista de descartes (las tres visualizaciones más obvias, ahora prohibidas: típicamente una pila de rectángulos con flechas, una captura de pantalla, un objeto centrado sobre un degradado). Establece los diales: variación, intensidad de movimiento, densidad, cada uno del 1 al 10, según el tema (un explicativo de seguridad para ingenieros es tranquilo y denso; un teaser de lanzamiento no es ni lo uno ni lo otro). Detalles y reglas de coreografía en references/02-direction.md.

Fase 4: guion gráfico y temporización

Una tabla: escena, segundos, qué se mueve, título, fila del libro mayor. Presupuestos que funcionaron en la práctica:

título de máximo 2 líneas y 14 palabras, mínimo 48 px en un lienzo de 1080 (un teléfono muestra el lienzo a aproximadamente 0.36x, por lo que 48 px son aproximadamente 17 pt); etiquetas de al menos 26 px;
un título permanece al menos palabras / 2.6 + 0.8 segundos, nunca se reemplaza a mitad de oración;
una idea por escena; una escena de más de 12 s necesita ritmos internos (pasos) con su propio título;
toda la pieza es una idea contada una vez: elimina cualquier escena cuya eliminación no pierda una fila del libro mayor.

Escribe el orden de las escenas y las duraciones solo en timeline.json. Remotion, los scripts de verificación y el pipeline de sonido de cuelab leen ese único archivo.

Fase 5: fundamentos

node scripts/scaffold.mjs <directorio-destino> --install

Luego: edita src/theme.ts (paleta, lienzo), coloca las fuentes en public/fonts, establece BRAND en src/ui/Chrome.tsx, edita timeline.json. Mantén la ruta del proyecto corta (ver errores comunes: ANGLE necesita una ruta corta en Windows). Renderiza una imagen fija de una escena 3D antes de escribir más: si WebGL falla ahora, fallará después.

Fase 6: construcción, escena por escena

Orden: la escena emblemática primero (la 3D o cuadrícula difícil), luego las escenas que dependen de ella, luego las escenas de conexión. Por escena:

escribe la escena según el contrato de diseño (references/03-layout-contract.md) usando Shell, tokens y los ayudantes de animación;
bash tools/shots.sh <Escena> out/<escena> <fotogramas...>: elige fotogramas al inicio, en medio del movimiento y en reposo de cada ritmo, una hoja de contacto;
lee la hoja una vez, responde: ¿primera/segunda/tercera cosa que se ve? ¿elemento focal donde se pretendía? ¿algo genérico? ¿qué cortar? Corrige como máximo tres cosas; vuelve a tomar solo los fotogramas cambiados;
cuando la escena sea estable, continúa. No pulas la escena 2 mientras la escena 6 no esté construida.

Los patrones de animación que realizan el trabajo (revelaciones de líneas enmascaradas, filas escalonadas, mezcla de hash, cambios de bits, etiquetas proyectadas en 3D, cuadrículas instanciadas) están en references/04-remotion-patterns.md; recetas 3D en references/05-three-assets.md.

Fase 7: activos

Prefiere activos procedurales: son deterministas, pequeños, tematizables y no conllevan riesgo de licencia. Cajas de lámina, logotipos extruidos, cuadrículas de celdas instanciadas y campos de puntos cubren la mayoría de los explicativos. Usa mallas generadas por IA solo cuando un objeto orgánico o de marca sea esencial y la licencia y el costo del servicio sean aceptables para el usuario; nunca ocultes que un activo fue generado. Logotipos y marcas reales: usa el archivo del proyecto sin alterar (recolorear una marca de un solo color suele estar bien; redibujarla no), verifica la licencia, acredita en pantalla o en el título.

Fase 8: verificación

Automática, en este orden (de barato a caro):

npx tsc --noEmit                 # tipos
python tools/ledger_lint.py      # números vs libro mayor
bash tools/shots.sh Main out/m <fotogramas>   # hoja de contacto, mirar una vez
npm run render && npm run encode          # render en bruto, luego h264 yuv420p de rango limitado
                                          # encode.sh termina ejecutando tools/probe.py

tools/probe.py verifica codec, yuv420p (no yuvj420p), tamaño, fps, duración contra timeline.json, rango limitado, sin fotogramas negros, átomo fast-start. Luego mira una hoja del mp4 final (fotogramas cada 4 s, extraídos con ffmpeg) y un fotograma a tamaño completo para nitidez de texto. Si hay disponible un crítico de diseño (por ejemplo, el skill creator-critic), ejecútalo en una carpeta de imágenes fijas: trata los bloqueos como bloqueos y los mayores como preguntas. Lista de verificación completa: references/06-verification.md.

Fase 9: entrega

Entrega: out/video.mp4, un fotograma de portada (un fotograma de reposo donde el título y el elemento focal se lean ambos), borrador del título (simple, sin exageraciones, fuente nombrada), texto alternativo (una oración sobre lo que muestra el video), créditos (activos, logotipos, licencias) y una lista "no verificado" (cualquier cosa en estado del libro mayor H o S, cualquier cosa que la compilación no pueda probar, cualquier cosa que no hayas podido revisar visualmente). No publiques nada tú mismo.

Elección entre opciones (tablas de decisión)

pregunta	elige	porque
2D o 3D para un elemento	3D solo cuando la profundidad o la forma física sean el punto (un chip, una pila, un campo de un millón de elementos); de lo contrario 2D	El 3D cuesta tiempo de render y legibilidad; úsalo donde explique
cámara	ortográfica, `manual = true`, fija por escena	La cámara ortográfica mantiene las etiquetas proyectables y las mediciones honestas
etiquetas en 3D	HTML o SVG proyectados con `project()`	El texto se mantiene nítido y con estilo
muchas celdas repetidas	`InstancedMesh` (miles) o `Points` (un millón)	llamadas de dibujo
fuentes	dos familias como máximo, OFL o con licencia, incluidas en `public/fonts`	determinismo, sin red en el render
texto sobre losa o relleno	texto oscuro sobre rellenos claros, nunca blanco sobre claro	contraste
sonido	diseñarlo después de que la imagen esté bloqueada, desde `timeline.json`	ver el skill cuelab

Modos de fallo que este método existe para prevenir

El video bonito pero incorrecto (sin libro mayor); el video correcto pero ilegible (sin contrato de diseño); el video genérico (sin frase idea, sin lista de descartes); el video que se ve bien en el estudio y se rompe en el render (no determinismo); el video que se ve bien al 100% y es un desastre en un teléfono (mínimos de tipo, prueba de miniatura); el video que no se puede puntuar (sin una sola línea de tiempo); el video cuyas afirmaciones nadie puede verificar (sin honestidad en la entrega). Errores concretos encontrados durante la construcción de los dos primeros videos, cada uno con síntoma, causa y corrección, están en references/07-pitfalls.md; léelo antes de depurar cualquier cosa que parezca magia.

Archivos en este skill

ruta	qué
`references/01-brief-and-ledger.md`	plantilla de brief, formato del libro mayor, cómo calcular y verificar hechos
`references/02-direction.md`	frase idea, lista de descartes, diales, reglas de coreografía, tokens de movimiento
`references/03-layout-contract.md`	lienzo, áreas seguras, mínimos de tipo y la aritmética de escala de teléfono
`references/04-remotion-patterns.md`	patrones de animación probados con código
`references/05-three-assets.md`	three.js en Remotion: cámara, sombreador de lámina, bordes, instanciación, puntos, extrusión, proyección de etiquetas
`references/06-verification.md`	la escalera de verificación completa, protocolo de hoja de contacto, codificación e inspección
`references/07-pitfalls.md`	cada error real encontrado, con correcciones
`references/08-adapting.md`	otras relaciones de aspecto, temas, idiomas, variante sin 3D, entrega a sonido
`templates/starter/`	un proyecto Remotion funcional: tema, ayudantes, interfaz de usuario, kit three.js, herramientas, plantillas BRIEF y FACTS
`scripts/scaffold.mjs`	copia el starter en un nuevo proyecto e instala
`../../examples/merkle-proof/`	un ejemplo completo de 36 s con hechos calculados, libro mayor, render e inspección

Nota de licencia que debes transmitir

Remotion no es MIT. Es gratuito para individuos y para equipos de hasta tres personas; las empresas que superen ese número necesitan una licencia paga (el CLI de Remotion imprime el aviso, ver remotion.pro/license). Informa al usuario una vez, al principio, cuando el proyecto pueda ser comercial. three.js, React y las fuentes incluidas (SIL OFL) son permisivas.

sourceframe

¿Qué es sourceframe?

Preguntar en tu IA favorita

Documentación