Koca Ventures Ltd
71-75 Shelton Street
Covent Garden, London
WC2H 9JQ, United Kingdom
Registered in England & Wales — 16231043
WEB PREMIUM Y 3D
Web cinematográfica,con ingeniería.
Somos ingenieros de software que también hacen motion de nivel de premio. Construimos a mano la capa pesada de 3D y scroll-scrub de su web y la sujetamos a un presupuesto de Core Web Vitals: cinematográfica y rápida, por ingeniería, no por suerte.
▶Entrada con scroll-scrub — un scrub de película completa sobre canvas que estamos desarrollando ahora mismo para una marca de gafas de lujo (próximamente)
CAPACIDADES
La capa cinematográfica, construida a mano
01
Narrativa guiada por scroll
Narrativas de scroll cinematográficas con GSAP, ScrollTrigger y Lenis. Tratamos el scroll como un montador trata una línea de tiempo —unas pocas escenas bien afinadas, no quince—, para que la historia se lea como oficio, no como ruido.
02
3D en tiempo real (Three.js / R3F)
Escenas WebGL construidas a mano con Three.js, o React-Three-Fiber cuando la escena se beneficia de la composición por componentes. WebGPU cuando la carga lo justifica, siempre con un fallback automático a WebGL2 para que nadie se quede con un lienzo en blanco.
03
Scroll-scrub por secuencia de fotogramas (estilo Apple)
La entrada al estilo Apple —una película decodificada en fotogramas y dibujada en un canvas a medida que se hace scroll— es una técnica que resolvemos con ingeniería, no una librería que enchufamos. Ahora mismo estamos construyendo una para una marca de gafas de lujo.
04
Trabajo de shaders y materiales
Shaders y materiales a medida, incluido TSL basado en nodos en la vía WebGPU, usados con mesura. Los efectos avanzados se equilibran con optimización y fallbacks para que el espectáculo nunca se coma su presupuesto de rendimiento.
05
Movimiento vectorial (Lottie / Rive)
Motion vectorial hecho por diseñadores vía Lottie para iconos e ilustraciones, y Rive cuando una animación necesita estado y datos. Pequeño, nítido e independiente de la resolución: la herramienta adecuada para el motion ligero.
06
Construido sobre Next.js
La capa cinematográfica vive en islas aisladas solo de cliente sobre Next.js; el resto del sitio permanece estático. El coste de hidratación es la principal palanca de rendimiento en un sitio 3D, y lo presupuestamos de forma deliberada.
LA PROMESA DE RENDIMIENTO Y ACCESIBILIDAD
Un presupuesto de Core Web Vitals que fijamos antes del primer shader
LCP≤ 2,5 s
Largest Contentful Paint
Un póster / primer fotograma rápido se pinta pronto — un hero pesado de canvas nunca bloquea el mayor render.
INP≤ 200 ms
Interaction to Next Paint
La más difícil de aprobar. Troceamos las tareas largas del hilo principal para que la página siga respondiendo mientras se mueve.
CLS≤ 0,1
Cumulative Layout Shift
El espacio de cada canvas y elemento multimedia se reserva de antemano, de modo que el 3D de carga tardía nunca desplaza la maquetación.
Las tres se miden en el percentil 75 de usuarios reales: los objetivos deben sostenerse en el campo, no solo en una ejecución de laboratorio. Los usuarios con movimiento reducido reciben por defecto una experiencia estática, limpia y rápida.
CÓMO TRABAJAMOS
Del storyboard a un presupuesto que mantenemos
01
Descubrir y crear el storyboard
Trazamos la historia antes de construir — qué pocas escenas cargan con la marca, dónde caen los compases del scroll y qué tiene que hacer el sitio más allá de verse bien.
02
Fijar el presupuesto de CWV y accesibilidad
Acordamos de antemano los objetivos de Core Web Vitals y las reglas de accesibilidad —movimiento reducido, teclado, controles de pausa—, para que la capa cinematográfica responda ante ellos.
03
Prototipar la escena hero
Construimos primero la escena más difícil —el scroll-scrub o la pieza central 3D— y demostramos que cumple el presupuesto en un móvil real de gama media.
04
Construir como islas aisladas
La capa pesada se construye como islas solo de cliente que se montan en diferido cerca del viewport; el resto de la página permanece estática y renderizada en el servidor.
05
Optimizar la cadena de assets
GLTF con compresión Draco / Meshopt, texturas KTX2, presupuestos de polígonos limitados por dispositivo y una escena móvil aligerada allí donde se gana su sitio.
06
Publicar y medir
Lanzamos y vigilamos métricas de usuarios reales, no solo una puntuación Lighthouse de laboratorio. El presupuesto es algo que sostenemos después del lanzamiento, no una cifra que citamos una vez.
El motion de nivel de premio es un oficio que ejercemos con ingeniería, no un plugin que instalamos: el stack se añade por proyecto y se construye según el presupuesto, no se entrega como una caja negra en la que tenga que confiar. Prometemos oficio y rendimiento que nos exigimos a nosotros mismos, no un premio que no hemos ganado.
¿Ya publica sitios con animación? este es el nivel premium de 3D por encima de nuestro trabajo en sitios web animados. El mismo listón de ingeniería, con un techo más alto en la capa cinematográfica y de 3D en tiempo real.
PREGUNTAS
Respuestas directas
¿Qué pasa con el móvil y la accesibilidad?
Ambos se diseñan desde el principio, no se parchean después. Los usuarios con movimiento reducido reciben por defecto un sitio sereno y plenamente legible, con el motion esencial sustituido en lugar de eliminado. El móvil ejecuta una escena aligerada o un póster estático, con fallback automático a WebGL2; y la reproducción automática siempre lleva un control de pausa.
¿Por qué no usar simplemente Webflow o Framer?
Para 3D decorativo —un globo girando, un parallax ligero— los builders van bien, y se lo diremos. En cuanto necesita shaders WebGL, físicas, GLTF optimizado o escenas interactivas en Three.js, el builder toca techo; esa capa hay que escribirla a mano, y nosotros la construimos según el presupuesto.
¿En qué se diferencian de un estudio de diseño?
Muchos estudios clavan el motion pero lo entregan renqueante: suspenden INP o CLS, se rompen en móvil, ignoran el movimiento reducido. Nosotros aportamos el mismo techo visual más la ingeniería: presupuestos de Core Web Vitals, accesibilidad, pipelines de assets y gestión de fallbacks. A menudo somos el socio al que un estudio de diseño subcontrata la construcción de alto rendimiento.
¿Cómo se presupuesta?
Por proyecto: no hay tarifa de catálogo. La forma típica: una delimitación breve remunerada, una construcción de alcance cerrado y, después, un retainer opcional. Cuéntenos el problema y lo delimitaremos con franqueza.
¿El código es nuestro o quedamos atados a ustedes?
Es suyo. Construimos a mano sobre herramientas abiertas y estándar —GSAP, Lenis, Three.js, React-Three-Fiber— en su propio repositorio, sin un runtime de builder propietario de por medio. Sin impuesto por usuario, sin plataforma de la que no pueda salir; sus propios ingenieros pueden ampliarlo.
¿Perjudica al SEO una web 3D?
No, si se construye con un presupuesto de Core Web Vitals: ese es precisamente el sentido de cómo trabajamos. El contenido permanece renderizado en el servidor y rastreable, la capa 3D se monta en diferido en el cliente y los objetivos de LCP, INP y CLS se fijan antes del primer shader.
¿Cuánto se tarda en construir una web 3D?
Una construcción centrada en el visual del hero suele llevar unas semanas; un lanzamiento avanzado multiescena o interactivo, unos meses. Recomendamos la entrega por fases: publicar primero un hero cinematográfico y rápido, y crecer luego hacia el trabajo multiescena sin reconstruir. Presupuestamos el calendario tras una llamada de delimitación.
Last reviewed:
¿HABLAMOS?
Cuéntenos qué tiene que hacer el sitio
Comparta el momento de marca, el lanzamiento o el configurador que tiene en mente, y delimitaremos una construcción cinematográfica con un presupuesto de Core Web Vitals escrito desde el principio.