Kinetia — Landing 3D con efecto túnel para estudios de apps

Una landing que se recorre como un túnel: cada scroll acerca la idea a la app.

Descripción

Kinetia no se lee: se recorre. Es una landing de una sola página para un estudio de desarrollo de apps en la que el visitante viaja por un túnel en 3D al hacer scroll. Cada giro de la rueda empuja la cámara hacia delante entre 50 marcos luminosos con forma de móvil, con pantallas de apps en las paredes, estelas de luz que se alargan cuanto más rápido bajas y, al fondo, una luz que crece hasta llegar al contacto. El túnel es interactivo. La cámara se balancea con el ratón, los marcos se encienden al pasar a su lado y el ángulo de visión se abre con la velocidad del scroll, como si aceleraras. Delante del túnel flota un móvil en 3D real que cambia de lado, gira y se acerca en cada sección siguiendo el relato, y el logotipo aparece extruido en volumen en Servicios y Contacto. El recorrido cuenta una historia: la idea entra en el túnel en la portada («Tu idea, convertida en app.»), atraviesa las cinco fases del proceso (descubrimiento, diseño, desarrollo, pruebas y lanzamiento), que es donde el túnel recorre más distancia, y sale a la luz en el formulario de contacto. Paleta oscura con acento menta y violeta, y tipografía Space Grotesk. Pensada para impresionar sin romperse: en el celular el túnel se aligera y el móvil 3D se coloca en la mitad superior para no tapar el texto; si el navegador no tiene WebGL 2 se muestra una imagen fija en su lugar, y si el visitante pide «reducir movimiento», la cámara deja de balancearse. El contenido se lee siempre por encima del túnel gracias a un velo que oscurece los bordes. Fácil de ajustar para quien toca HTML: cada sección lleva un atributo con el punto del túnel en el que está y la intensidad de la luz, y otro con la posición, el giro y la escala del móvil 3D. Cambias el recorrido entero sin tocar el código de la animación. Secciones incluidas • Portada: el móvil 3D flota en la boca del túnel, con titular que sube palabra a palabra y dos botones. • Servicios: cuatro tarjetas (apps nativas, multiplataforma, diseño UX/UI, backend y evolución) con el logotipo en 3D. • El proceso: cinco fases con número grande en degradado, plazo y barra de progreso; el móvil cambia de lado en cada una mientras el túnel acelera. • Apps: galería de seis pantallas de apps (fitness, delivery, fintech, viajes, e-commerce y bienestar) en perspectiva. • Planes: tres planes con precio «desde» y plazo, uno destacado. • Contacto: formulario de demostración junto a la luz del final del túnel. • Cabecera fija con menú y pie con enlaces a cada sección. El efecto túnel • 50 marcos con forma de móvil, con halo, que se encienden al acercarse. • 26 pantallas de apps en las paredes (16 en el celular). • Líneas guía por las paredes, polvo de luz y estelas que responden a la velocidad del scroll. • Cámara que avanza con el scroll, se balancea con el ratón y abre el ángulo al acelerar. • Luz al final del túnel que crece al llegar al contacto. • El mismo túnel en cada visita (generado con una semilla fija). Animaciones y detalles • Pantalla de entrada con el logotipo y scroll suave. • Móvil 3D con flotación, giro de vaivén en la portada y parallax con el ratón. • Logotipo extruido en volumen a partir del SVG. • Titular de portada que sube palabra a palabra, bloques que entran al hacer scroll y botones con pulso. • Galería de pantallas en perspectiva que se endereza al pasar el ratón. • Versión ligera en celulares y equipos modestos; respeta «reducir movimiento». Qué incluye la descarga • index.html con todo el contenido y los estilos de la página. • El efecto túnel (assets/tunel.js) y el motor 3D (motor-3d/). • Móvil en 3D (.glb, unos 800 KB) e imagen de respaldo para navegadores sin WebGL 2. • Logotipo en SVG y seis pantallas de apps en WebP. • Guía README.md con la publicación (Hostinger y Netlify) y la personalización paso a paso. Ideal para Estudios de desarrollo de apps · Agencias digitales · Startups tecnológicas · Lanzamientos de apps y productos digitales · Freelancers y desarrolladores que quieren un portafolio que se recuerde Tecnologías HTML · CSS · JavaScript · Three.js · WebGL 2 · GSAP · Lenis Requisitos técnicos • Cualquier hosting de archivos estáticos (Hostinger, Netlify, Vercel, GitHub Pages…). • Sin base de datos ni proceso de compilación. • Se publica en un hosting o se prueba con un servidor local: abrir index.html con doble clic no funciona, porque el navegador bloquea los módulos de JavaScript. • Conexión a Internet: Three.js, GSAP, Lenis y la tipografía se cargan desde CDN. • Navegador con WebGL 2 para ver el túnel (todos los actuales); si no lo tiene, se ve la imagen de respaldo. Personalización Textos, colores (variables CSS), menú y planes en index.html. El recorrido del túnel y la posición del móvil 3D se ajustan por sección con atributos data-tunel y data-3d. Las pantallas de las paredes son imágenes de assets/pantallas/ y el móvil se puede sustituir por cualquier modelo .glb. No tiene panel de administración: hace falta editar HTML. Aviso sobre el contenido Kinetia es un estudio ficticio: nombre, servicios, plazos, precios y planes son de ejemplo. El móvil 3D y las pantallas de apps se han generado con inteligencia artificial y no reproducen apps ni marcas reales. El formulario es de demostración y no envía datos.

Características

Lo que este producto trae de fábrica.

Tecnologías

Con qué está construido.

Detalles del desarrollo