
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.
- Formato
- Vídeo · 16:9
- Duración
- 0:15
Gratis Gratis con una cuenta
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
/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
- Pide: dile a tu agente seis meses, los valores de las barras y de la línea, las unidades y un titular.
- Rellena: escribe tus textos y colores en las variables del bloque, con una longitud parecida a la que se pensó para el diseño.
- Renderiza: renderiza un borrador con
npx hyperframes render, revisa algunos fotogramas y renderiza el MP4 final. - 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.






