Gratis
Halden Solace · 16:9
Renderizado con este Skill
Widgets Liquid Glass v1.0.0
Widgets de datos de cristal líquido esmerilado cuentan hacia arriba, un panel destacado informa del progreso y unos chips de estado se iluminan sobre una aurora en movimiento.
Sin valoraciones todavía 0 descargas
- Formato
- Vídeo · 16:9
- Duración
- 0:08
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 8 segundos de panel de cristal líquido. Tres widgets esmerilados cuentan una temperatura, un nivel de batería y un anillo de pasos, un panel destacado con tu logo muestra un título, una frase y un estado que se completa, y tres chips de estado se encienden, todo sobre un shader de aurora en movimiento. Los textos, las cifras y el logo se editan en el HTML.
Actualizado el 3 nov 2026
Qué obtienes
- Un MP4 de 8 segundos a 1920×1080 con fondo de aurora en movimiento
- Widgets de datos que cuentan hacia arriba, un panel destacado y chips de estado
- Tu logo en el panel
Ideal para
- Apps de fitness, salud y dispositivos inteligentes
- Paneles y funciones de datos
- Recursos de apoyo para lanzamientos de producto
No es para
- Fondos lisos o con los colores de la marca
- Más de tres datos
Sobre este Skill
Tú dices
/liquid-glass-widgets Haz widgets liquid glass para una carrera con Halden: temperatura, batería del reloj y 8.2K pasos, con un panel "Long run saved: 18.4 km at an easy pace in the Halden Solace" que termina en "Run saved".
Los widgets son la forma en que la gente echa un vistazo a lo que importa. Widgets Liquid Glass monta un pequeño panel con el estilo de cristal líquido esmerilado, con cifras que suben y un panel que informa de una tarea terminada, para que una app de fitness, un dispositivo inteligente o un servicio muestren sus datos con elegancia.
Cómo funciona
- Pide: dile a tu agente los tres valores de los widgets, el título y la frase del panel, el estado final y tu logo.
- 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
- Elige tres cifras que cuenten una sola historia, como temperatura, batería y pasos en una carrera.
- Mantén la frase del panel en unos 70 caracteres.
- Usa un logo blanco.
- 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
- Tres datos, un título y una frase cortos para el panel, un estado final y un logo blanco.
- 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
¿Los widgets pueden mostrar otros datos?
Sí. Las etiquetas, los valores y las unidades están en el HTML; la animación de cuenta funciona con cualquier número.
¿Tiene el mismo aspecto que Notificaciones Liquid Glass?
Sí, la misma aurora y el mismo cristal, así que los dos se montan bien juntos.
¿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.
