
Renderizado con este Skill
Carrera de barras v1.0.0
Barras ordenadas que crecen y se adelantan unas a otras a medida que pasan los meses, con un eje que se reescala mientras suben las cifras.
- Formato
- Vídeo · 16:9
- Duración
- 0:12
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 que convierte una tabla pequeña en una carrera de barras. Pega tus periodos y series como texto plano; las barras crecen, se reordenan y se adelantan periodo a periodo, los valores van subiendo a su lado y el eje se reescala a medida que aumentan. Título, subtítulo, datos, número de barras, velocidad, formato numérico y acento son variables.
Actualizado el 3 nov 2026
Qué obtienes
- Una carrera de barras en MP4 a 1920×1080, 2 segundos por periodo por defecto
- Adelantamientos, etiquetas con contador y un eje que se escala solo
- Datos introducidos como texto plano, sin hojas de cálculo
Ideal para
- Historias de ventas, crecimiento y rankings
- Resúmenes del año y publicaciones de hitos
- Periodismo de datos y explicaciones en clase
No es para
- Decenas de series o rangos de tiempo muy largos
- Cifras exactas que haya que leer con calma
Sobre este Skill
/bar-chart-race Haz una carrera de barras titulada "Ember & Bun: burgers sold by month" de junio a noviembre, valores en miles: Double Stack 12, 18, 26, 35, 47, 61; Classic Cheese 22, 25, 28, 30, 32, 33; y cuatro platos más de la carta. Acento naranja.
Los rankings que cambian con el tiempo son una historia, y una carrera de barras la cuenta en segundos. Dale a Bar Chart Race unos cuantos periodos y unas cuantas series como texto plano; anima la subida, los adelantamientos y al líder, con una tipografía editorial limpia y un único color de acento en la barra que va en cabeza.
Cómo funciona
- Pide: dile a tu agente el título, los periodos y los valores de cada serie como texto plano, además de las unidades.
- 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
- Entre cuatro y ocho series y entre cuatro y ocho periodos es lo que mejor se lee.
- Elige el acento para el elemento que quieres que siga el espectador.
- Usa el prefijo y el sufijo para unidades como $, k o %.
- Aumenta la duración de cada periodo para una carrera más tranquila y fácil de leer.
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
- Tus periodos y los valores de cada serie, un título y las unidades.
- 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
¿Qué formato usan los datos?
Una línea por serie: el nombre, dos puntos y los valores separados por comas, en el mismo orden que los periodos. Tu agente puede convertir una hoja de cálculo a este formato por ti.
¿Cuánto dura el vídeo?
Dos segundos por periodo por defecto, así que seis periodos dan unos 12 segundos. La duración de cada periodo es una variable.
¿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, Ember & Bun.






