Gratis
Solenne · 16:9
Renderizado con este Skill
Notificaciones Liquid Glass v1.0.0
Tarjetas de notificación de cristal líquido esmerilado flotan sobre un fondo de aurora en movimiento, una con progreso en directo y otra con respuesta.
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 interfaz de cristal líquido. Dos tarjetas de notificación esmeriladas entran flotando sobre un shader de aurora en movimiento: una muestra una tarea en curso que se completa y la otra, un mensaje con puntos de escritura y los botones Reply y Mark Read, con tu logo en la esquina. Los textos, los mensajes de estado 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
- Dos tarjetas de notificación esmeriladas con estados de progreso y respuesta
- Tu logo en la esquina
Ideal para
- Lanzamientos de apps y presentaciones de funciones
- Vídeos de producto con aire de sistema operativo moderno
- Fondos para diapositivas de keynote
No es para
- Fondos lisos o con los colores de la marca
- Mensajes largos
Sobre este Skill
Tú dices
/liquid-glass-notification Haz notificaciones liquid glass para Solenne: una tarjeta "Sunset scene" que atenúa el salón y termina con "Evening wind-down is on", y un mensaje de Ines pidiendo caldear el dormitorio.
El cristal líquido es el aspecto de los sistemas operativos actuales: esmerilado, refractivo, vivo. Notificaciones Liquid Glass pone las notificaciones de tu producto en ese estilo sobre una aurora en movimiento, para que una actualización, un pedido o un mensaje se sientan nativos y premium a la vez.
Cómo funciona
- Pide: dile a tu agente qué está haciendo la primera tarjeta y qué dice al terminar, el mensaje de la segunda tarjeta 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
- Usa un logo blanco; va sobre el fondo de colores.
- Escribe la tarjeta de progreso como algo que está pasando ahora mismo.
- Deja cada tarjeta en una línea corta.
- 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
- Dos textos de notificación cortos, 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
¿Puedo cambiar los colores de la aurora?
Los colores del shader se definen en el script; tu agente puede ajustarlos a tu paleta.
¿El efecto de cristal es real o una imagen?
Real: se renderiza en directo con una librería de cristal líquido, así que refracta el fondo en movimiento.
¿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, Solenne.
