
Renderizado con este Skill
Pantalla de inicio en teléfono 3D v1.0.0
Un teléfono 3D gira en un estudio de luz suave con una pantalla de inicio de cristal líquido, notificaciones en directo y tu web app en pantalla.
- 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 planos recurso con un dispositivo 3D. Un modelo 3D de teléfono gira sobre un escritorio bajo un fondo de pantalla con shader; su pantalla de inicio de cristal líquido muestra iconos de apps, widgets y notificaciones que entran deslizándose, y luego abre una página web con una frase principal y tarjetas. Todo el contenido de la pantalla (iconos, etiquetas, notificaciones, la página) es HTML editable; el teléfono y el portátil son modelos 3D.
Actualizado el 4 nov 2026
Qué obtienes
- Un MP4 de 15 segundos a 1920×1080 con un teléfono 3D
- Una pantalla de inicio de cristal líquido, notificaciones y tu página en pantalla
- HTML editable para cada píxel de la pantalla
Ideal para
- Vídeos de lanzamiento de apps y planos recurso
- Vídeos de cabecera para landing pages
- Demos para inversores y keynotes
No es para
- Mostrar una grabación real de tu app
- Formatos solo verticales
Sobre este Skill
/ios26-liquid-glass Haz una pantalla de inicio en teléfono 3D para Solenne: notificaciones sobre la escena de la tarde y el informe de energía, y la página de Solenne "Your home, on cue".
Los planos recurso con dispositivos hacen que cualquier app parezca ya lanzada. Pantalla de inicio en teléfono 3D renderiza un teléfono 3D real con una pantalla de inicio de cristal líquido actual, para que tus notificaciones aparezcan y tu web app se abra en él, bajo luz de estudio, sin rodaje ni artista 3D.
Cómo funciona
- Pide: dile a tu agente las notificaciones, los nombres de las apps y el contenido de la página que debe mostrar tu teléfono.
- 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
- Sustituye los iconos y nombres de apps por defecto por los tuyos o por otros neutros; nuestra muestra lo hace.
- Limita cada notificación a una línea corta.
- Usa los colores reales de tu producto en la página.
- No tiene variables: tu agente edita el texto 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
- Las notificaciones, los nombres de apps y el texto de la página que quieres en pantalla, y tus colores.
- 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
¿Viene con iconos de apps reales?
El original incluye iconos de apps conocidas como marcadores de posición. Sustitúyelos por los tuyos o por otros neutros; nuestra muestra usa iconos neutros generados.
¿Puedo poner una captura en la pantalla?
Sí. La pantalla es HTML, así que una imagen de tu app puede sustituir a la página.
¿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.






