Communitygithub.com

ronnnerr/norstack

Video React programático. Úsalo para superposiciones de Remotion, gráficos en movimiento o una composición de React renderizada a mp4. Solo movimiento generado, el metraje permanece con el video y el retrato.

¿Qué es norstack?

Este skill proporciona un flujo de trabajo para crear superposiciones de video generadas mediante programación con React y Remotion. Está diseñado para desarrolladores que necesitan integrar gráficos en movimiento con metraje de video existente, manteniendo el metraje original intacto y centrándose en la animación generada. Funciona dentro de un slot de proyecto definido, nunca en la raíz del repositorio, y tiene reglas estrictas sobre el uso de `durationInFrames` en lugar de segundos en CSS, así como sobre el uso de funciones de interpolación y físicas como `interpolate` y `spring` en lugar de animaciones lineales. Es compatible con plataformas como Claude Code y otras herramientas de agente donde se ejecuten skills de React, y utiliza componentes como `Sequence` y `AbsoluteFill` para organizar las composiciones. El skill también exige la precarga de fuentes y audio para evitar renderizados fallidos, y especifica formatos de salida como ProRes 4444 o WebM con canal alfa para superposiciones transparentes.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ronnnerr/norstack/tree/HEAD/skills/remotion

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

remotion

Metraje → video / portrait. Esto es para movimiento generado en React.

Slot

Nunca en la raíz del repositorio. Siempre:

<directorio_de_videos>/edit/animations/slot_<id>/

Crea la estructura allí. Renderiza a render.mp4. Apunta la superposición de la EDL a ese archivo.

Leyes

  • durationInFrames es la verdad. No adivines segundos en CSS.
  • interpolate / spring. Sin lineal. Sin animación de layout (top/left/width).
  • Sequence + AbsoluteFill. Una idea por composición.
  • Precarga fuentes y audio. Una fuente faltante es un re-renderizado.
  • fps coincide con el padre (24 para cine, 30 para redes sociales) a menos que indiques lo contrario.
  • Superposición transparente → ProRes 4444 o WebM con alfa. Confirma antes de elegir.

Después de renderizar

ffprobe render.mp4
# luego mira / ve los fotogramas de salida

Las reglas estrictas de video aún aplican: desplazamiento de PTS en superposiciones, subtítulos al final, fundidos de audio de 30ms en el corte padre.

Emprendimiento

Paleta de profile y taste. Cada proyecto tiene su propia paleta. Sin kit naranja sobrante de video de lanzamiento.

No hagas preguntas dentro de un agente slot. Elige lo obvio y renderiza.

Skills relacionados