Cómo crear un recorrido aéreo 3D de una web
Un recorrido aéreo de una web convierte una página larga en una presentación en movimiento: la cámara avanza por sus secciones, destaca unos pocos mensajes y se aleja para revelar el diseño. En este ejemplo, tres tarjetas de texto se levantan cuando la cámara se acerca.
Para presentar un producto o un portafolio, elige tres mensajes que quieras destacar. La trayectoria de la cámara los conecta en una presentación breve; las tarjetas elevadas dan protagonismo a cada uno.
1. Describe la página y el movimiento de cámara
Antes de empezar, elige el titular inicial, tres mensajes breves sobre funciones y un color de marca. Inclúyelos en el prompt para que la animación tenga contenido concreto que mostrar.
Abre iArt en modo Animation y elige un lienzo 16:9. Usa este guion como punto de partida y sustituye los textos entre corchetes por los tuyos:
Crea un recorrido aéreo de una web de 15 segundos para [nombre del producto]. Diseña una página de destino larga con el titular «[titular principal]» y tres secciones: «[función uno]», «[función dos]» y «[función tres]». Usa un fondo blanco, texto oscuro y [color de marca] como acento.
Desplaza la cámara a poca altura sobre la página en una sola toma continua. Al acercarse a cada función, levanta su tarjeta de texto desde el borde inferior. Mantén ese borde unido a la página, muestra una sombra debajo de la tarjeta y conserva la legibilidad del titular. Deja que la tarjeta vuelva a apoyarse al pasar la cámara.
Después de la tercera función, eleva la cámara para revelar la página completa. Regresa al titular inicial y mantén el encuadre hasta el final. El movimiento debe ser fluido, sin cortes entre secciones. Sin narración ni música.La trayectoria de la cámara y el movimiento de las tarjetas son las partes esenciales del guion. Comprueba ambos en la vista previa antes de perfeccionar los colores o la decoración.
2. Haz que la cámara recorra un mismo espacio
Inclinar la página establece la perspectiva. El avance crea el recorrido aéreo: la cámara pasa por nuevas secciones de una misma página larga. La implementación utiliza una cámara de perspectiva de Three.js, cuya proyección hace que los objetos cercanos parezcan mayores que los lejanos. Consulta la implementación oficial y la documentación de parámetros de la cámara de Three.js.
| Tiempo | Movimiento de cámara | Qué comprobar |
|---|---|---|
| 0–7,8 segundos | Vuelo a poca altura sobre la página | Las tres tarjetas de texto reciben protagonismo de forma sucesiva. |
| 7,8–9,2 segundos | Ascenso sobre la página | Las tarjetas se apoyan mientras se revela el diseño. |
| 9,2–9,5 segundos | Breve vista cenital | La página larga completa cabe en el encuadre. |
| 9,5–10,4 segundos | Regreso a la sección principal | La cámara llega a una composición de cierre deliberada. |
| 10,4–15 segundos | Pausa final | El titular permanece legible. |
Mantén breve la vista cenital y deja más tiempo para leer el titular final. Para otro diseño, decide qué debe observar el espectador en cada parada antes de ajustar el ritmo.
3. Levanta cada tarjeta desde su borde inferior
La bisagra determina cómo se percibe la unión de la tarjeta. Sitúa el eje de rotación en el borde inferior y deja ese borde fijo sobre la página. Si el panel gira alrededor de su centro, el borde inferior también se mueve: en vez de una tarjeta que se levanta, parecerá un objeto flotante.
En este ejemplo, cada tarjeta se levanta hasta 68 grados. Un lateral fino visible y una sombra proyectada sobre la página hacen evidente la separación. La cara frontal conserva suficiente luminosidad para que se lea el titular.
Sincroniza cada elevación con la llegada de la cámara: la tarjeta se levanta al convertirse en protagonista, se mantiene un instante y vuelve a apoyarse cuando la cámara pasa. Limita cada tarjeta a un mensaje breve para que pueda leerse durante el recorrido.
4. Adapta el contenido antes de cambiar la cámara
En la primera variante, conserva la estructura de la página y cambia solo el titular principal, los tres mensajes y el color de acento. Así podrás revisar una modificación concreta. Cambiar a la vez la longitud de la página, el tamaño de las tarjetas y la trayectoria de la cámara dificulta identificar qué provocó un problema de encuadre.
Las tres tarjetas dicen «Describe. Or upload.», «Change it by saying so.» y «Export. Then share.». Cada una transmite un mensaje y la página que la rodea aporta contexto. Una página de lanzamiento podría destacar tres ventajas; un portafolio, tres proyectos. Escribe los nuevos textos antes de solicitar la edición y mantén los titulares lo bastante cortos para leerlos al pasar la cámara.
| Parte del ejemplo | Qué adaptar | Qué comprobar después |
|---|---|---|
| Titular inicial y final | El nombre de tu producto y su propuesta principal. | El texto cabe y permanece legible durante la pausa final. |
| Tres tarjetas elevadas | Tres funciones, proyectos o mensajes. | Ningún titular se divide de forma extraña ni queda oculto detrás de otro elemento. |
| Color de acento | Un color de la paleta de tu marca. | El texto y los diagramas mantienen el contraste con sus fondos. |
| Diseño de la página | Tu diseño o los recursos preparados de tu web. | Las posiciones de las tarjetas y el encuadre siguen coincidiendo con el diseño. |
Sustituir el diseño de la página requiere más trabajo que cambiar el texto. Un diseño basado en una captura necesita capas separadas para las tarjetas que se levantarán, alineadas con sus posiciones en la página.
5. Comprueba el movimiento, el encuadre y la legibilidad
Pausa en cada elevación de tarjeta, en la vista cenital y en el titular final. Comprueba que el borde inferior de cada tarjeta sigue unido a la página, que el titular mira hacia la cámara y que la sombra cae sobre la página.
Después reproduce la secuencia completa. Una imagen fija convincente no permite saber si la cámara se detiene de forma extraña, pasa demasiado rápido por un mensaje o cambia bruscamente de dirección. Comprueba que el título tiene espacio suficiente alrededor durante la pausa final y que la página cabe en la vista cenital.
| Problema visible | Qué cambiar |
|---|---|
| El resultado parece una presentación de diapositivas. | Mantén una página en una sola escena y mueve la cámara continuamente a lo largo de ella. |
| La tarjeta se aleja flotando de su sección. | Mantén el borde inferior fijo sobre la página y gira alrededor de esa bisagra. |
| La tarjeta se levanta antes de que se pueda ver. | Vincula su elevación al paso de la cámara por su posición. |
| El titular deja de ser legible. | Acorta el texto, ajusta el ángulo de la tarjeta o da más tiempo a ese momento. |
| La página completa queda recortada en la vista cenital. | Eleva la cámara o ajusta el encuadre antes de cambiar el diseño de la página. |
El ejemplo calcula la animación a partir del fotograma del video, lo que facilita revisar momentos concretos. La documentación de useCurrentFrame de Remotion explica esta temporización por fotogramas. Tras revisar fotogramas individuales, reproduce la secuencia completa para valorar cómo se conectan. Cuando la vista previa esté lista, revisa también el video exportado.
Para un lanzamiento centrado en una página web, este enfoque ofrece una estructura de movimiento concreta que puedes adaptar. Si la historia trata de un objeto de interfaz que cambia de estado, el tutorial de animación UI morph utiliza otro enfoque. Para otros formatos de lanzamiento, consulta los ejemplos de videos de lanzamiento de productos. Para una presentación más amplia del producto, visita el creador de videos promocionales de iArt.
FAQ
¿Cuánto cuesta crear un recorrido aéreo de una web en iArt?
La última solicitud a Haiku 5.5 de este ejemplo consumió unos US$0,02 en créditos, con el código de la escena ya preparado. Ese importe corresponde a una solicitud y excluye los intentos anteriores y la exportación; empezar desde cero o hacer más revisiones tiene un costo adicional. Las cuentas nuevas reciben US$2 en créditos gratuitos al registrarse, sin tarjeta de crédito, para probar la generación y edición de animaciones. Descargar MP4 requiere un plan de pago. Consulta los precios de iArt para ver los detalles actuales de los planes.
¿Qué es un recorrido aéreo de una web?
Es un video en el que una cámara virtual recorre una página web en perspectiva. Puede destacar secciones mediante primeros planos o elementos elevados y después alejarse para mostrar cómo encajan entre sí.
¿Qué debe incluir un prompt para un recorrido aéreo de una web?
Incluye el titular de la página, tres mensajes breves sobre funciones, los colores de marca y la ruta de la cámara. Especifica dónde se une cada tarjeta, cuándo se levanta y dónde termina la cámara. Así tendrás movimientos concretos que comprobar en la vista previa.
¿Puedo usar una captura de mi propia web?
Una captura puede servir como superficie de la página, pero por sí sola no aporta tarjetas móviles. Cada tarjeta necesita una capa separada alineada con su posición en la página. El encuadre y las posiciones de las tarjetas deben coincidir con tu diseño.
¿Un recorrido aéreo de una web es lo mismo que una grabación de pantalla?
Una grabación de pantalla captura la interacción con una web funcional. Un recorrido aéreo presenta el diseño mediante una cámara animada y puede levantar partes del diseño en el espacio. Usa una grabación para mostrar clics exactos y el funcionamiento del producto; usa un recorrido aéreo para presentar la página y sus mensajes principales.
¿Puedo convertirlo en un Reel o Short vertical?
El ejemplo utiliza un lienzo 16:9. Una versión vertical necesita revisar el encuadre: mantén visibles la tarjeta protagonista y su titular, ajusta la distancia de la cámara y revisa la vista de página completa. Un recorte central puede cortar las tarjetas.