Todos los Skills de vídeo Premium en un solo plan. Cancela cuando quieras.Ver planes
Halden Solace · 16:9

Renderizado con este Skill

Gráfico de barras y líneas v1.0.0

Un gráfico editorial de barras y líneas se construye mes a mes: suben las barras, una línea las cruza y cada valor cuenta hacia arriba.

Sin valoraciones todavía 0 descargas
Formato
Vídeo · 16:9
Duración
0:15

Gratis Gratis con una cuenta

Inicia sesión para descargar

Pega esto en tu agente. Conecta la CLI si hace falta y luego instala el Skill.

Un bloque gratuito de HyperFrames para 15 segundos de narrativa con datos al estilo de un periódico. Aparecen las líneas de cuadrícula y los meses, las barras suben una a una con sus valores y después una línea las cruza con sus propias etiquetas de porcentaje, bajo un titular con serifa, un subtítulo, una leyenda y una línea de fuente. Los meses, las dos series de datos, las escalas, las etiquetas y los títulos se editan en el HTML.

Actualizado el 3 nov 2026

Qué obtienes

  • Un gráfico de 15 segundos a 1920×1080 con fondo transparente
  • Barras, una línea y etiquetas de valor que aparecen en orden
  • Un titular con serifa, una leyenda y una línea de fuente

Ideal para

  • Historias de resultados y crecimiento
  • Actualizaciones para inversores y consejos de administración
  • Vídeos explicativos e informes

No es para

  • Más de seis periodos
  • Paneles con muchos datos

Sobre este Skill

Tú dices

/data-chart Haz un gráfico de barras y líneas: "Halden Solace: pairs sold vs. repeat buyers", de junio a noviembre, pares vendidos de 9 a 23 mil y clientes que repiten del 24% al 44%.

Dos cifras que se mueven juntas cuentan una historia: ventas y clientes que repiten, tráfico y registros, ingresos y margen. Gráfico de barras y líneas muestra las dos en un gráfico editorial y sereno que se construye solo, para que el público lea la tendencia antes de que la voz en off la explique.

Cómo funciona

  1. Pide: dile a tu agente seis meses, los valores de las barras y de la línea, las unidades y un titular.
  2. Rellena: escribe tus textos y colores en las variables del bloque, con una longitud parecida a la que se pensó para el diseño.
  3. Renderiza: renderiza un borrador con npx hyperframes render, revisa algunos fotogramas y renderiza el MP4 final.
  4. Reutiliza: las variables viven en un pequeño archivo JSON, así que la siguiente versión es solo un renderizado más.

Consejos

  • Pon la escala de la línea por encima de la de las barras para que sus etiquetas nunca se solapen.
  • Indica las unidades en el subtítulo y en la leyenda.
  • El fondo es transparente, así que renderízalo con canal alfa y colócalo sobre tu propio vídeo, una foto o un color liso; el SKILL.md incluye los dos comandos.
  • No tiene variables: tu agente edita los textos y las cifras directamente en el HTML, siguiendo el SKILL.md.

Código abierto

Es un bloque del registro de HyperFrames, creado por HeyGen y los colaboradores de HyperFrames (heygen-com/hyperframes) y compartido con la Apache License 2.0. La descarga es el bloque con sus recursos y un SKILL.md escrito por Reelity, para que tu agente sepa rellenarlo y renderizarlo; HyperFrames se ejecuta desde npm.

Qué necesitas antes de empezar

Tú aportas
Seis periodos de datos de dos métricas, las unidades y un titular.
Dependencias
Node.js 22 o posterior — obligatorio · FFmpeg — obligatorio
Costes externos
Ninguno. HyperFrames es gratuito y de código abierto, y renderiza en tu propio ordenador.
Última prueba
v1.0.0 —

Opiniones de usuarios

Aún no hay opiniones. Instala el Skill y sé el primero en valorarlo.

Preguntas frecuentes

¿Puedo usar otros periodos en lugar de meses?

Sí. Las etiquetas son una lista en el script; sirven trimestres, años o semanas.

¿Cómo evito que las etiquetas se solapen?

Pon el máximo de la línea por debajo del máximo de las barras para que la línea quede por encima de ellas; nuestra muestra lo hace.

¿Por qué es gratis?

Es un bloque de código abierto de HyperFrames, obra de HeyGen y los colaboradores de HyperFrames. Lo listamos tal cual, con un SKILL.md para que tu agente pueda usarlo y una muestra hecha con una de nuestras marcas de la casa, Halden Solace.

Guías

How to make an animated bar and line chart for a videoTwo measures moving together tell a story. How to build an editorial bar-and-line chart that animates itself, free, with the Bar and Line Chart block.

Skills similares

Ver todo