Koca Ventures Ltd
71-75 Shelton Street
Covent Garden, London
WC2H 9JQ, United Kingdom
Registered in England & Wales — 16231043
PREMIUM WEB & 3D
Cineastisches Web,engineered.
Wir sind Softwareingenieure, die auch Motion auf Auszeichnungsniveau beherrschen. Die schwere 3D- und Scroll-Scrub-Ebene Ihrer Website bauen wir von Hand und halten sie an ein Core-Web-Vitals-Budget — cineastisch und schnell, durch Engineering, nicht durch Glück.
▶Scroll-Scrub-Einstieg — ein Canvas-Scrub über den kompletten Film, den wir aktuell für eine Luxus-Brillenmarke entwickeln (in Kürze)
CAPABILITIES
Die cineastische Ebene, von Hand gebaut
01
Scrollgesteuertes Storytelling
Cineastische Scroll-Erzählungen mit GSAP, ScrollTrigger und Lenis. Wir behandeln Scroll wie ein Editor eine Timeline — wenige, fein abgestimmte Szenen statt fünfzehn — damit die Geschichte als Handwerk lesbar bleibt, nicht als Überladung.
02
Echtzeit-3D (Three.js / R3F)
Handgebaute WebGL-Szenen mit Three.js, oder React-Three-Fiber, wenn die Szene von Komponentenkomposition profitiert. WebGPU, wenn die Arbeitslast es rechtfertigt — immer mit automatischem WebGL2-Fallback, damit niemand vor einer leeren Fläche steht.
03
Frame-Sequenz-Scroll-Scrub (Apple-Stil)
Der Apple-artige Einstieg — ein Film, in Einzelbilder dekodiert und beim Scrollen auf ein Canvas gezeichnet — ist eine Technik, die wir konstruieren, keine Bibliothek, die wir einwerfen. Aktuell bauen wir einen für eine Luxus-Brillenmarke.
04
Shader- und Material-Arbeit
Eigene Shader und Materialien, einschließlich node-basiertem TSL auf dem WebGPU-Pfad, mit Bedacht eingesetzt. Anspruchsvolle Effekte werden durch Optimierung und Fallbacks gezähmt, sodass das Spektakel niemals zu Lasten Ihres Performance-Budgets geht.
05
Vektor-Motion (Lottie / Rive)
Vom Designer gefertigte Vektor-Motion via Lottie für Icons und Illustrationen, und Rive, wenn eine Animation zustands- und datengetrieben sein muss. Klein, scharf, auflösungsunabhängig — das richtige Werkzeug für leichte Motion.
06
Auf Next.js gebaut
Die cineastische Ebene lebt in isolierten, rein clientseitigen Inseln auf Next.js; der Rest der Site bleibt statisch. Hydrationskosten sind der größte Performance-Hebel einer 3D-Site, und wir budgetieren sie bewusst.
DAS PERFORMANCE- UND A11Y-VERSPRECHEN
Ein Core-Web-Vitals-Budget, das wir vor dem ersten Shader festlegen
LCP≤ 2,5 s
Largest Contentful Paint
Ein schnelles Poster bzw. erstes Frame zeichnet früh — ein schweres Canvas-Hero blockiert den größten Paint nie.
INP≤ 200 ms
Interaction to Next Paint
Der schwierigste Wert. Wir zerlegen lange Main-Thread-Tasks, damit die Seite reaktiv bleibt, während sie sich bewegt.
CLS≤ 0,1
Cumulative Layout Shift
Für jedes Canvas- und Medienelement wird der Platz von Anfang an reserviert, sodass spät ladendes 3D das Layout nie verschiebt.
Alle drei Werte werden am 75. Perzentil echter Nutzer gemessen — die Ziele müssen im Feld halten, nicht nur im Laborlauf. Nutzer mit Reduced-Motion bekommen standardmäßig ein sauberes, schnelles statisches Erlebnis.
SO ARBEITEN WIR
Vom Storyboard zu einem Budget, das wir einhalten
01
Discovery & Storyboard
Wir kartieren die Geschichte vor dem Bau — welche wenigen Szenen die Marke tragen, wo die Scroll-Beats sitzen und was die Site jenseits des guten Aussehens leisten muss.
02
CWV- und A11y-Budget festlegen
Wir vereinbaren die Core-Web-Vitals-Ziele und Barrierefreiheitsregeln — Reduced-Motion, Tastatur, Pausensteuerung — vorab, damit die cineastische Ebene daran gehalten wird.
03
Hero-Szene prototypisieren
Wir bauen die schwerste Szene zuerst — das Scroll-Scrub- oder 3D-Herzstück — und weisen auf einem echten Mittelklasse-Smartphone nach, dass sie das Budget einhält.
04
Als isolierte Inseln bauen
Die schwere Ebene wird als rein clientseitige Inseln konstruiert, die nahe am Viewport verzögert mounten; der Rest der Seite bleibt statisch und servergerendert.
05
Asset-Pipeline optimieren
GLTF mit Draco-/Meshopt-Kompression, KTX2-Texturen, gedeckelte Polygon-Budgets pro Gerät und eine verschlankte Mobilszene dort, wo sie ihren Platz verdient.
06
Ausliefern & messen
Wir launchen und beobachten Real-User-Metriken, nicht nur einen Lighthouse-Laborwert. Das Budget ist etwas, das wir nach dem Launch halten — keine Zahl, die wir einmal nennen.
Motion auf Auszeichnungsniveau ist ein Handwerk, das wir konstruieren, kein Plugin, das wir installieren — der Stack wird projektbezogen ergänzt und auf das Budget hin gebaut, nicht als Blackbox ausgeliefert, der Sie vertrauen müssen. Wir versprechen Handwerk und Performance, an denen wir uns selbst messen lassen — keinen Preis, den wir nicht gewonnen haben.
Sie liefern bereits animierte Sites aus? Das hier ist die Premium-3D-Stufe über unserer Arbeit an animierten Websites. Derselbe Engineering-Anspruch, eine höhere Decke auf der cineastischen Echtzeit-3D-Ebene.
FRAGEN
Klare Antworten
Was ist mit Mobil und Barrierefreiheit?
Beides wird von Anfang an mitkonzipiert, nicht nachträglich geflickt. Nutzer mit Reduced-Motion bekommen standardmäßig eine ruhige, voll lesbare Site, bei der wesentliche Motion ersetzt statt entfernt wird. Mobil läuft eine verschlankte Szene oder ein statisches Poster, mit automatischem WebGL2-Fallback — und Autoplay bekommt immer eine Pausensteuerung.
Warum nicht einfach Webflow oder Framer nutzen?
Für dekoratives 3D — ein rotierender Globus, leichte Parallaxe — sind Builder in Ordnung, und das sagen wir auch. Sobald Sie WebGL-Shader, Physik, optimiertes GLTF oder interaktive Three.js-Szenen brauchen, stößt ein Builder an seine Decke; diese Ebene muss von Hand programmiert werden, und wir konstruieren sie auf das Budget hin.
Wie unterscheiden Sie sich von einem Design-Studio?
Viele Studios treffen die Motion und liefern sie trotzdem ruckelig aus — INP oder CLS werden gerissen, Mobil bricht, Reduced-Motion wird ignoriert. Wir bringen dieselbe visuelle Obergrenze plus das Engineering: Core-Web-Vitals-Budgets, Barrierefreiheit, Asset-Pipelines und Fallback-Handling. Oft sind wir der Partner, an den ein Designstudio den performanten Build untervergibt.
Wie wird der Preis gebildet?
Pro Engagement — es gibt keinen Listenpreis. Der typische Zuschnitt: ein kurzes, bezahltes Scoping, ein Build mit festem Umfang, dann optional ein Retainer. Nennen Sie uns das Problem, und wir stecken den Umfang ehrlich ab.
Gehört uns der Code, oder sind wir an Sie gebunden?
Es gehört Ihnen. Wir bauen von Hand auf offenen Standardwerkzeugen — GSAP, Lenis, Three.js, React-Three-Fiber — in Ihrem eigenen Repository, ohne proprietäre Builder-Laufzeit dazwischen. Keine Pro-Nutzer-Abgabe, keine Plattform, die Sie nicht verlassen können; Ihre eigenen Entwickler können es erweitern.
Schadet eine 3D-Website der SEO?
Nicht, wenn es auf ein Core-Web-Vitals-Budget hin konstruiert ist — genau das ist der Kern unserer Bauweise. Inhalte bleiben servergerendert und crawlbar, die 3D-Ebene mountet verzögert auf dem Client, und die Ziele für LCP, INP und CLS stehen vor dem ersten Shader fest.
Wie lange dauert die Entwicklung einer 3D-Website?
Ein fokussierter Hero-Visual-Build dauert typischerweise einige Wochen; ein anspruchsvoller Multi-Szenen- oder interaktiver Launch einige Monate. Wir empfehlen gestufte Lieferung — zuerst einen schnellen cineastischen Hero ausliefern, dann ohne Neubau in Multi-Szenen-Arbeit hineinwachsen. Einen Zeitplan nennen wir nach einem Scoping-Gespräch.
Last reviewed:
BEREIT FÜR EIN GESPRÄCH?
Sagen Sie uns, was die Site leisten muss
Schildern Sie uns den Markenmoment, den Launch oder den Konfigurator, den Sie im Kopf haben, und wir stecken einen cineastischen Build ab — mit einem Core-Web-Vitals-Budget, das von Anfang an festgeschrieben ist.