Kavaliero.com es un proyecto propio, sin cliente detrás. Lo construimos para que hiciera de prueba: enseña lo que sabemos hacer mientras lo usas, y esta página cuenta cómo está hecho.
- Tipo de proyecto
- Proyecto propio del estudio
- Qué hicimos
- Diseño, desarrollo y motion
- Idiomas
- Español e inglés, con direcciones propias
- Tecnología
- Next.js, GSAP y Three.js
Lo que vendemos se tiene que poder probar antes de comprarlo.
Un caso suele contarse con capturas. Este también las trae, pero lo que describe ocurre además mientras lo recorres: el caballero de arriba, la cortina roja entre una página y otra.
Todo sale del mismo cuadrado.
La intro arma el caballero con celdas muestreadas de su propio SVG. La cortina entre páginas llena la pantalla de celdas rojas en 0,42 segundos y la despeja en 0,54. El fondo dibuja ese mismo cuadrado detrás de cada página, y el caballero de arriba está hecho de él.
La cortina del sitio, a escala, entre dos de sus páginas.
Una sola función mueve la portada.
La primera pantalla y las tres de servicios viajan en la misma cinta. La posición de todas sale de una única función continua del scroll, así que la velocidad nunca se corta y nada rebota. En toda la cinta, ningún tramo de scroll se queda sin movimiento.
Cristales cortados en código.
Los bloques de la página de proyectos no vienen de un archivo de modelo. Cada uno se talla al cargar la página: alrededor de una docena de planos recorta el sólido y un suavizado redondea las aristas. El humo que deja el puntero es una simulación de fluidos que corre en el mismo contexto WebGL, por eso el cristal lo refracta.
Cada escena sabe cuándo parar.
La página de automatización abre sobre una carretera de luz y la de Leadesse, con tres robots. Todas las escenas WebGL del sitio se pausan cuando salen de pantalla o la pestaña queda oculta. Con movimiento reducido ninguna se anima: unas quedan en una imagen fija y los objetos de la portada no se cargan.
Dos idiomas con direcciones propias
Cuatro colores y una sola tipografía
Rojo escaso: botones, acentos y el punto final
Movimiento que no toca el layout
Intro que precarga los modelos 3D
Escenas pesadas cargadas solo al acercarse
Resortes amortiguados en lugar de rebotes
Analítica sin cookies