Creador de webs con animación al scroll

Un prompt construye una web donde el scroll mueve la cámara: entra en una escena, sale volando, aterriza en la siguiente, sin cortes.

Katagiri High — The Last Light, construido en el mundo Horimiya para esta página. Haz scroll dentro del marco: tres escenas, dos empalmes, un solo vuelo continuo.

The Descent — un puente de cristal baja en espiral por un abismo, con texto de escena y navegación

The Hollow Star — la sala del trono vista desde el pasillo, título de escena The Hollow Center

Odyssey — el Cíclope llenando la cueva, título de escena The Cyclops

Scroll of Colossal Things — una ballena del tamaño de una isla bajo un bote, estilo tinta

SENGOKU — El campamento despierta — Acto I de tres. El scroll baja la cámara entre los estandartes hasta las tiendas; la página dice SCROLL TO DESCEND y lo cumple. — **El campamento despierta** — Acto I de tres. El scroll baja la cámara entre los estandartes hasta las tiendas; la página dice SCROLL TO DESCEND y lo cumple.

SENGOKU — El campo de las hojas — Acto II. Sin corte al campo de batalla: la misma cámara cruza el puente rojo y las lanzas y los tambores llegan a su alrededor. — **El campo de las hojas** — Acto II. Sin corte al campo de batalla: la misma cámara cruza el puente rojo y las lanzas y los tambores llegan a su alrededor.

SENGOKU — El castillo blanco — Acto III. El vuelo termina en la torre del homenaje y ofrece repetirlo. Tres escenas, dos empalmes, cero fundidos. — **El castillo blanco** — Acto III. El vuelo termina en la torre del homenaje y ofrece repetirlo. Tres escenas, dos empalmes, cero fundidos.

Five Realms — Puerta a la luz de la luna — Primero de cinco reinos. La inmersión empieza fuera del arco y lo atraviesa: la puerta es un lugar por el que la cámara pasa de verdad. — **Puerta a la luz de la luna** — Primero de cinco reinos. La inmersión empieza fuera del arco y lo atraviesa: la puerta es un lugar por el que la cámara pasa de verdad.

Five Realms — Sendero de bambú — Segundo reino. El empalme deja la puerta detrás en vez de disolverse hacia la siguiente imagen. — **Sendero de bambú** — Segundo reino. El empalme deja la puerta detrás en vez de disolverse hacia la siguiente imagen.

Five Realms — Acantilados sobre el mar de nubes — Tercer reino. El texto y las filas de datos siguen legibles mientras la cámara sube entre las nubes. — **Acantilados sobre el mar de nubes** — Tercer reino. El texto y las filas de datos siguen legibles mientras la cámara sube entre las nubes.

Homer’s Odyssey — Ítaca: la partida — Nueve escenas de una sola imagen maestra: el puerto, los barcos y la luz pertenecen al mismo mundo. — **Ítaca: la partida** — Nueve escenas de una sola imagen maestra: el puerto, los barcos y la luz pertenecen al mismo mundo.

Homer’s Odyssey — Troya: el caballo — Segunda escena. El empalme desde el puerto es un clip generado, no un fundido: el fuego llega antes de que notes el cambio. — **Troya: el caballo** — Segunda escena. El empalme desde el puerto es un clip generado, no un fundido: el fuego llega antes de que notes el cambio.

Homer’s Odyssey — El mar color de vino — Tercera escena. Los puntos de navegación saltan entre escenas; la rueda sigue recorriendo cada fotograma intermedio. — **El mar color de vino** — Tercera escena. Los puntos de navegación saltan entre escenas; la rueda sigue recorriendo cada fotograma intermedio.

LIVE PROOF

Vívelo.

Abre el work y úsalo aquí.

Una web con scroll es un vuelo, no un pase de diapositivas.

Studio genera el mundo, una imagen 16:9 por escena y los clips de cámara que te llevan de una a otra. La página que se entrega es HTML puro y JavaScript nativo: la posición del scroll fija el tiempo del vídeo, así que corre en el móvil, no necesita framework y pesa como tres vídeos cortos.

Empalmes, no cortes — Cada conexión se genera con el último fotograma de un clip y el primero del siguiente: la unión es idéntica, no un fundido.
Un solo look en todas las escenas — Cada imagen de escena deriva de una imagen maestra, así que el puerto de la escena uno es el mismo puerto de la escena tres.
Una página, no un vídeo — Recibes una URL publicada para abrir, forkear y enviar. Los títulos de escena, antetítulos, filas de datos y etiquetas de navegación son HTML editable.

Lo que se pregunta antes de empezar.

¿Qué es una web con animación al scroll?

Una página donde el scroll no solo baja la página: conduce una cámara. Cada posición de scroll es un fotograma de vídeo, así que el visitante atraviesa la escena a su ritmo en vez de ver un clip.

¿Hace falta GSAP o Three.js?

No. El motor es JavaScript nativo que recorre clips pre-renderizados según la posición del scroll. Se puede meter en una web con GSAP o Next.js, pero nada aquí lo exige.

¿Con cuántas escenas conviene empezar?

Tres. Son unos 25 MB de vídeo en 16:9: carga rápido y ya se lee como un viaje. Cada escena extra suma dos clips, unos 9 MB más.

¿Funciona en el móvil?

Sí. Las pantallas pequeñas reciben una versión 640×360 y el recorrido sigue el scroll táctil; los clips pesados de escritorio no se cargan ahí.

¿Qué implica una construcción?

Tres imágenes, tres inmersiones y dos conexiones: ocho piezas generadas. Pide a Studio el número de clips y el modelo antes de arrancar, porque el vídeo es la parte lenta y de pago.

¿Puedo editar los textos después?

Sí. Los títulos de escena, antetítulos, filas de datos y etiquetas de navegación son HTML normal en la página publicada. Cambias las palabras sin re-renderizar un fotograma.

¿Qué pasa si falla una generación?

La construcción se detiene y te dice qué clip falló. No rellena el hueco con arte de relleno: una escena falsa rompe el empalme y, con él, la ilusión.

¿Puedo usar una IP existente o mi propio arte?

Sí. Las escenas pueden derivar de una imagen de referencia, y los mundos de esta página se construyeron dentro de mundos de IP existentes. Trae una hoja de personaje o un key visual si el look tiene que coincidir con algo.

Dale tres paradas a un solo lugar.

Studio genera las escenas, las inmersiones y los empalmes, y publica una página que puedes recorrer y enviar. Empieza por el puerto de abajo o escribe tu propio lugar.

Crear el mercado de Liyue