Landing Kit

Tres tarjetas de proyecto en fila. Cada una lleva su propia mini escena 3D en vivo (un globo con satélites, un chasis, un teléfono flotando), se inclina hacia el ratón y su obra se desplaza a distinta velocidad al scrollear.

Ojo: Cada escena tiene su propio dibujante y sólo pinta cuando está en pantalla. Coste medido de las tres juntas: 17 llamadas de dibujo y 3.704 triángulos, trivial incluso en un teléfono. Si prefieres imágenes o video en vez de 3D, quita el canvas y pon un <img> dentro de .lk-case__art.

Cierre a cuatro columnas: titular con llamada a la acción, ficha de contacto con iconos y redes, una gema 3D girando, y un recuadro con código para escanear.

Ojo: ATENCIÓN: el código de escaneo es DECORATIVO, un patrón generado que no codifica ninguna dirección. Si el sitio necesita uno que funcione de verdad, hay que generarlo con una librería y sustituir ese recuadro.

Tres columnas: aviso de derechos, enlace para volver arriba y una frase de cierre. Se apila en móvil.

Pantalla de apertura a dos columnas: a la izquierda el titular, el párrafo y dos botones; a la derecha espacio libre para un visual (imagen, video o una escena 3D). El titular entra letra por letra.

Ojo: La columna derecha queda vacía a propósito: es donde se enchufa el motor visual que elijas. En móvil pasa arriba y se reduce.

Barra superior a todo lo ancho que se encoge a una pastilla de cristal centrada en cuanto el visitante empieza a scrollear. Logo, enlaces y un botón de acción.

Ojo: Los enlaces del menú apuntan a anclas internas; el núcleo las intercepta para que el desplazamiento respete la inercia.

Tres paneles de cristal lado a lado: barras de habilidad que se llenan al entrar en pantalla, una rejilla de tecnologías con hover, y un diagrama con un cubo girando en 3D rodeado de cuatro principios.

Ojo: El cubo es CSS puro con transformaciones 3D: no usa WebGL. Las barras nacen llenas en el marcado y sólo se vacían si la librería de animación cargó, para que un fallo de red no muestre barras vacías junto a etiquetas que dicen 95%. Se apilan en una columna por debajo de 1100px.

Rótulo con punto de acento a la izquierda y un botón secundario a la derecha. Sirve para abrir cualquier sección: casos, servicios, precios.

Cuatro cifras con icono que suben desde cero cuando entran en pantalla, separadas por divisores, más una cita al final. Sirve de prueba social inmediata debajo del hero.

Ojo: Las cifras llevan su valor REAL en el marcado; sólo se ponen a cero si la librería de animación cargó. Así, si el CDN falla, el sitio nunca anuncia «0+ años de experiencia».

Retícula tenue desvanecida hacia los bordes, más una barra fina arriba que marca cuánto llevas leído de la página.

Ojo: La retícula es sólo CSS, no cuesta nada. La barra se alimenta del progreso de scroll del núcleo.

Un sólido facetado en 3D fijo detrás de todo el contenido. Nace como el visual del hero, se hunde al fondo al avanzar, se abre en esquirlas al cruzar la zona media y se reensambla al final. Responde al ratón con parallax.

Ojo: Necesita que las secciones encima sean de cristal (translúcidas) para que se vea a través: ahí está la sensación de profundidad. Si el navegador no tiene WebGL, se sale en silencio y el sitio conserva todo lo demás.

Sustituye el puntero del sistema por un aro que lo persigue con retraso y un punto que va más rápido. El aro crece sobre lo interactivo y los botones se inclinan hacia el ratón.

Ojo: Se apaga solo en táctil y con movimiento reducido. El puntero del sistema sólo se oculta si el guion consiguió encender el propio: al revés, un fallo dejaría al visitante sin cursor de ningún tipo.

Contornos cerrados y suaves que se dibujan solos al cargar y luego derivan a distintas velocidades según el scroll. Da sensación de capas y de página diseñada a un fondo que si no sería plano.

Ojo: Es SVG puro: ni WebGL ni librerías. La semilla es fija a propósito, así que el fondo se ve idéntico en cada visita — uno que cambia en cada recarga se siente roto, no vivo. El color del trazo sale de la variable --lk-linea-arte, así que sigue a la paleta. Con movimiento reducido se dibuja y se queda quieto.

Cubre el sitio mientras arranca: marca latiendo y una barra de progreso. Al retirarse da paso a la entrada del hero.

Ojo: Lanza el evento `lk:cargado` al terminar. El hero lo escucha para entrar escalonado; si no incluyes esta pieza, el hero entra por su cuenta. La barra es de ritmo, no mide carga real.

Una foto deja de ser plana. Acompañada de un mapa de profundidad, cada zona de la imagen se desplaza según su distancia: el retrato adquiere relieve y se mueve con el ratón y con el scroll. Es la misma técnica del sitio de Lando Norris, y funciona con cualquier foto — una persona, un producto, un edificio.

Ojo: Se monta en cualquier elemento con data-lk-retrato="foto.jpg" y, si lo tienes, data-lk-depth="profundidad.jpg". SIN mapa de profundidad real se usa una aproximación (un domo suave): da relieve creíble a un sujeto centrado, pero NO separa el pelo ni los bordes finos del fondo. Ahí es donde esta técnica se rompe y se ven halos; con pelo rizado o vegetación hay que generar el mapa de verdad. Sin foto dibuja una escena de demostración para que puedas ver el efecto sin archivos.

Estrellas que derivan y parpadean detrás de todo el sitio. Da profundidad y movimiento sutil sin coste: es canvas 2D, no usa WebGL ni ninguna librería externa.

Ojo: Baja a 90 estrellas en móvil. Se redibuja solo dentro del bucle del núcleo.

Un objeto 3D se dibuja encima de una foto, alineado a ella, y pasa de malla de alambre a sólido conforme scrolleas. Es el efecto del casco del sitio de Lando Norris. Acepta un modelo propio (.glb) o genera la forma en código: casco, esfera, icosaedro, caja, toro o cápsula.

Ojo: ALINEAR es el trabajo de verdad, y no se automatiza: que el objeto caiga exactamente sobre el sujeto de la foto se ajusta a mano, foto por foto, con data-lk-pos, data-lk-rot, data-lk-escala y data-lk-fov. El código se escribe una vez; cada foto nueva cuesta un rato de calibración. Las formas generadas no sustituyen a un modelo hecho por un artista: sirven para tener el efecto sin depender de ningún archivo. Un modelo propio se centra y se normaliza solo, así que la escala significa lo mismo venga como venga exportado; si falla al cargar, cae a la forma generada en vez de dejar el hueco vacío.