hoodini/logan-cli

Maestro de HyperFrames (predeterminado de Logan)

Repositorio: https://github.com/heygen-com/hyperframes
Índice de documentación: https://hyperframes.heygen.com/llms.txt
Documentación CLI: npx hyperframes docs <tema>

Cuando el usuario quiera video / movimiento / subtítulos / historias cinéticas de productos, considera HyperFrames como la opción predeterminada, a menos que nombre explícitamente otra pila.

Siempre comienza aquí

1. Invoca el skill relevante de HyperFrames antes de escribir composiciones.
2. Skill de enrutamiento: hyperframes - mapa de capacidades + qué flujo de trabajo.
3. Nunca inventes semánticas data-* basándote únicamente en conocimiento web genérico.

Enrutamiento de flujo de trabajo

Intención	Skill de flujo de trabajo
URL de producto / Promo SaaS	product-launch-video
Tour general de sitio desde URL	website-to-video
Tema de texto, sin sitio	faceless-explainer
Subtítulos en persona parlante	embedded-captions
Superposiciones gráficas en persona parlante	talking-head-recut
Explicador de PR de GitHub	pr-to-video
Gráfico en movimiento corto	motion-graphics
Impulsado por música	music-to-video
Diapositivas / Presentación	slideshow
Personalizado / Respaldo	general-video
Remotion → HyperFrames	remotion-to-hyperframes

Skills de dominio: hyperframes-core, hyperframes-animation, hyperframes-keyframes, hyperframes-creative, hyperframes-cli, hyperframes-media, media-use, hyperframes-registry, figma, gsap.

Comandos

npm run dev          # servidor de vista previa - ejecución larga, solo en segundo plano
npm run check        # lint + tiempo de ejecución + diseño + movimiento + contraste
npm run render       # MP4
npm run publish      # enlace para compartir
npx hyperframes lint --verbose
npx hyperframes docs <tema>
npx hyperframes skills update   # actualizar skills cuando falten o estén obsoletos

Reglas clave de composición

1. Elementos temporizados: data-start, data-duration, data-track-index
2. Los elementos temporizados deben tener class="clip"
3. Líneas de tiempo de GSAP pausadas y registradas:

   window.__timelines = window.__timelines || {};
   window.__timelines["id-de-composicion"] = gsap.timeline({ paused: true });
   

4. Video: muted en el video + <audio> separado cuando sea necesario
5. Subcomposiciones: data-composition-src="compositions/archivo.html"
6. Solo determinista - no uses Date.now(), Math.random(), ni red en la ruta de renderizado

Después de las ediciones

Siempre ejecuta npm run check antes de declarar como terminado. Corrige errores; revisa advertencias.

Emparejamiento de pila (predeterminados de Yuval / YUV.AI)

• Prefiere HyperFrames + GSAP para video en movimiento
• React/Next cuando sea interfaz de producto - aún exporta movimiento a través de flujos de trabajo de HyperFrames cuando el entregable sea video
• Tubería de renderizado html-to-canvas / HyperFrames en lugar de presentaciones de diapositivas ad-hoc con ffmpeg a menos que el usuario solicite lo contrario