
Renderizado con este Skill
Tarjeta de reproducción en curso v1.0.0
Una tarjeta de reproducción al estilo Spotify con tu portada, el nombre de la canción y una barra de progreso en movimiento, lista para superponer a un vídeo vertical.
- Formato
- Formato corto · 9:16
- Duración
- 0:05
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 una superposición de 5 segundos en 9:16. Una tarjeta musical esmerilada sube con una portada cuadrada grande, el título de la canción, una línea de artista y una barra de progreso que avanza, y luego se desvanece. La canción, el artista y la portada se editan en el HTML; el fondo es transparente para superponerla.
Actualizado el 3 nov 2026
Qué obtienes
- Una superposición de tarjeta de 5 segundos a 1080×1920 con fondo transparente
- Portada, título, artista y una barra de progreso animada
- Instrucciones para superponerla a tu vídeo
Ideal para
- Bandas sonoras de campañas y playlists
- Promociones de podcasts y música
- Stories y Reels
No es para
- Vídeos horizontales
- Videoclips largos
Sobre este Skill
/spotify-card Haz una tarjeta de reproducción en curso para la canción de campaña de Aurelle, "Wear the Light", con el conjunto de pulseras como portada, sobre nuestro plano de las pulseras.
Las tarjetas de música dicen "esta es la banda sonora" al instante. Tarjeta de reproducción en curso coloca la canción de tu campaña, tu playlist o un episodio de tu podcast en una tarjeta animada y limpia, con tu portada, para que un vídeo vertical pueda acreditar o promocionar el sonido.
Cómo funciona
- Pide: dile a tu agente el título de la canción, la línea de artista, la portada y el plano sobre el que debe ir.
- 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
- Usa una portada cuadrada de al menos 800 px de ancho.
- Limita el título a unas pocas palabras; se muestra en grande.
- La tarjeta tiene fondo transparente, así que renderízala con canal alfa y colócala sobre tu propio vídeo o foto; el SKILL.md incluye los dos comandos.
- Nuestra muestra sustituye el logo de la plataforma por una simple etiqueta "Now playing".
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
- El título de una canción o episodio, una línea de artista, una portada cuadrada y el plano sobre el que colocarla.
- 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 cambiar los colores?
Sí. Los colores de la tarjeta y del texto son CSS sencillo en el HTML.
¿Aparece el logo de Spotify?
El paquete conserva el pequeño logo original; nuestra muestra lo cambia por una etiqueta "Now playing", y tu agente también puede hacerlo.
¿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, Aurelle.







