Vídeos demo para desarrolladores de apps, desde tu URL
Con una app web publicada, o con la página de presentación de una app móvil, ya tienes lo necesario para sacar una demo locutada a partir de su URL, sin abrir un editor de vídeo. Así entendemos los vídeos demo para desarrolladores de apps: la página que ya desplegaste es el material, y el 9:16 graba su versión móvil en una pantalla de teléfono.
Esta guía es para el desarrollador independiente que prefiere escribir código a montar vídeo. Repasa qué se puede grabar según lo que has construido, una demo vertical real de un juego en el navegador, dónde va cada vídeo (con los límites honestos de las vistas previas de App Store y Google Play) y cómo renderizar desde Cursor o VS Code.
Jam3a: una demo vertical (9:16) de 50 segundos de una app de noches de juegos en el navegador, 92 palabras locutadas, grabada sobre la versión móvil de la web. Salas privadas, de dos a doce jugadores, sin descargas ni registros.
Qué puedes grabar, según lo que has construido
Grabamos páginas web en un navegador real en la nube. Así que la primera pregunta no es el formato, sino qué tiene URL.
| Lo que tienes | Lo que grabamos | Mejor formato | Lo que conviene saber |
|---|---|---|---|
Una app web adaptable | La propia app, sin sesión o con una sesión de captura (desde Scale) | 9:16 para uso en móvil, 16:9 para herramientas de escritorio | Lo más parecido a una demo de producto de verdad |
Una página de presentación de una app móvil | La página: capturas, funciones, marcas de agua de las tiendas | 9:16 y 16:9 | Enseña tu marketing, no imágenes de la app funcionando |
Una app nativa sin presencia web | Nada por ahora | — | Grábala en el dispositivo o en el simulador |
Una API, un SDK o una CLI | Tu documentación o tu página, o un guion gráfico que escribas tú | 16:9 | Una animación a partir de un guion escrito suele explicarlo mejor |
Para una app web tras un inicio de sesión, usa una ruta de demo pública con datos de ejemplo, en cualquier plan, o una sesión de captura desde el plan Scale: la extensión del navegador pasa tu sesión iniciada al grabador.
Una demo vertical real: Jam3a, 50 segundos
Jam3a es una app de navegador para noches de juegos con amigos: abres una sala privada y tus amigos entran, sin instalar nada. Hicimos su demo de 50 segundos en 9:16, 1080×1920, con 92 palabras locutadas en inglés. Al ser vertical, se grabó sobre la versión móvil de la web en una pantalla de teléfono, la que ve quien la abre en el móvil.
La narración empieza por la noche de juegos, no por el producto: «Tired of complicated game setups for game night?». Nombra los roces que conoce cualquier anfitrión (descargas, inicios de sesión) y luego enseña el recorrido en el orden en que lo vive quien organiza: crear una sala privada en segundos, invitar de dos a doce jugadores, elegir un juego de rondas rápidas. Termina con la acción que ofrece la página, «Create your private room now», y repite la promesa que más importa a un grupo: sin descargas ni registros.
Por qué es una buena demo de desarrollador: cada frase es un paso o una condición de la app real, y los datos más fuertes, el número de jugadores y que no hay que instalar nada, se pueden comprobar en la página. Ese es el trabajo de la demo de una app: responder a «¿qué pasa cuando la abro?» antes de que quien la ve tenga que preguntarlo.
Dónde va tu demo y qué acepta cada sitio
Un vídeo hecho desde tu web rinde mejor en los espacios que controlas. Las tiendas de aplicaciones son la excepción: piden imágenes de la propia app.
| Dónde | Qué usar | Reglas que conviene conocer |
|---|---|---|
Tu página de presentación | Un vídeo 16:9 arriba del todo y uno 9:16 para las visitas desde el móvil | Escribe para verlo sin sonido: los subtítulos cuentan la historia |
Publicaciones y galerías de lanzamiento | El vídeo 16:9, de 45 a 60 segundos | Una tarea, de principio a fin |
README o página de GitHub | Una imagen de portada enlazada a la página del vídeo | Deja la primera pantalla del README para el comando de instalación |
Redes sociales | El vídeo 9:16 | Lo importante, en los primeros segundos |
Vista previa de App Store | Imágenes capturadas de la propia app | Hasta 30 segundos, hasta tres vistas previas por idioma, solo contenido de la app, se reproduce sin sonido por defecto |
Vídeo de vista previa de Google Play | Un enlace de YouTube a imágenes de la app | Solo los primeros 30 segundos se reproducen solos (sin sonido); al menos el 80 % del vídeo debe mostrar la experiencia real dentro de la app; anuncios desactivados |
Por tanto, para una app nativa, un vídeo de tu página de presentación no sirve como vista previa en las tiendas: Apple solo admite contenido de la propia app y Google Play quiere que casi todo el vídeo sea la experiencia real (consulta las fuentes). Sigue siendo útil en la página que lleva a la gente a la tienda. Para una app web sin ficha en tiendas, es la demo. Para hacer bien un montaje vertical, lee cómo hacer vídeos verticales para TikTok y Reels.
Renderizar demos desde tu IDE o tu cadena de despliegue
Un desarrollador rara vez quiere otro panel más. Dos formas de quedarte donde trabajas:
Conecta el servidor MCP
Añade PageToVid a Cursor o VS Code (o a Claude o ChatGPT) como servidor MCP; la configuración está en la página de MCP y en hacer vídeos con Claude por MCP. Funciona en todos los planes.
Pide el vídeo con palabras normales
«Una demo 9:16 de 45 segundos de https://tu-app.example, centrada en crear una sala, que termine con “Empieza gratis”.» El asistente puede inspeccionar antes la página en el formato que vas a grabar, para que los planos apunten al producto y no solo a la cabecera.
Revisa el guion gráfico y renderiza
Lee las escenas, corrige una frase o reorienta un plano y renderiza: 40 créditos por vídeo, unos 10 minutos. El primer vídeo de cualquier web es gratis, con una pequeña marca de agua.
Vuelve a renderizar en cada versión
Cuando un despliegue cambie una pantalla que sale en la demo, llama a la API desde tu CI y recibe un webhook cuando el nuevo vídeo esté listo. El patrón está en automatizar vídeos con la API.
Un consejo sacado de nuestros propios renders: apunta el vídeo a una ruta pública estable, no a un despliegue de vista previa que desaparece al fusionar la rama.
Errores que vemos en las demos de apps
- Un panel de escritorio grabado en 9:16. El vertical graba tu versión móvil. Si la tienes descuidada, arréglala o haz la demo en 16:9.
- Una app vacía. Una cuenta nueva sin salas, sin proyectos y sin datos es la demo de una pantalla en blanco. Rellénala.
- Grabar la página de presentación y llamarlo partida. En una ficha de tienda incumple las reglas de arriba; en tu web, di «esto es lo que hace», no «mírame jugar».
- Todas las funciones a la vez. Un solo recorrido: abrir, hacer lo principal, ver el resultado.
Tienes más vídeos verticales y el flujo de trabajo en el caso de uso de vídeos para TikTok; para una herramienta de escritorio encaja mejor el caso de uso de vídeo demo SaaS.
Lo que le cuesta a un desarrollador independiente
Tu primer vídeo de cualquier web es gratis y sin tarjeta; los vídeos gratis llevan una pequeña marca de agua y una pantalla final. Un vídeo sin suscripción y sin marca de agua cuesta 3,90 $. El plan Creator a 19 $ al mes cubre 25 vídeos, suficiente para una versión 16:9 y otra 9:16 de cada lanzamiento. Volver a renderizar tras un cambio de interfaz cuesta un render. Los clips generados con IA, para planos que tu web no puede enseñar, son solo para planes de pago, a 311 créditos por clip de 8 segundos. Tienes el detalle en precios y, si comparas con herramientas de avatares o de imágenes de archivo, las páginas de comparación dicen con honestidad dónde gana cada una.
Cuándo un desarrollador no debería usar PageToVid
Las vistas previas de tienda de una app nativa. Graba la propia app: el simulador de iOS o QuickTime con tu iPhone conectado, la grabación del emulador de Android Studio, y después recorta en CapCut o iMovie. Es lo que piden Apple y Google.
Un juego cuya gracia está en las sensaciones. La fluidez, los controles y el sonido necesitan una captura de juego real, por ejemplo con OBS.
Un recorrido técnico largo. Un paseo de 15 minutos por tu SDK es una grabación de pantalla con tu voz, en Loom u OBS.
Una charla o la historia del fundador. Usa una cámara y tu propia cara.
Fuentes
Convierte tu sitio web en un vídeo — gratis
Pega la página que quieres filmar. PageToVid escribe el guion, graba el sitio real, pone la voz y entrega el MP4.
Preguntas frecuentes
¿Puedo usar un vídeo de PageToVid como vista previa en App Store?
No para una app nativa. Apple indica que las vistas previas solo deben mostrar contenido de la propia app, y Google Play pide que al menos el 80 por ciento del vídeo sea la experiencia real dentro de la app. Un vídeo de tu página de presentación va en esa página, en tus publicaciones de lanzamiento y en tus redes.
¿El 9:16 recorta mi web de escritorio?
No. El 9:16 carga tu web en una pantalla de teléfono y graba su versión móvil, la misma versión adaptable que ven tus usuarios en el móvil. El 16:9 y el 1:1 graban la versión de escritorio.
¿Puedo hacer vídeos demo desde Cursor o VS Code?
Sí. Añade el servidor MCP de PageToVid a tu editor y pide con palabras normales un vídeo de una URL. El asistente puede inspeccionar la página, redactar el guion gráfico y lanzar el render, en todos los planes.
¿Se puede volver a renderizar una demo automáticamente en cada versión?
Sí, con la API: lanza un render desde tu CI cuando una versión cambie una pantalla que sale en la demo y recibe un webhook cuando el vídeo nuevo esté listo. Cada render cuesta 40 créditos.