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 — schnell UND cineastisch, durch Engineering statt Glück.
Die meisten preisverdächtigen Sites stammen entweder aus Design-Studios, die die Animation beherrschen, sie aber ruckelig ausliefern, oder aus Template-Shops, die schnell sind, aber an eine Grenze stoßen, sobald echtes WebGL gefragt ist. Wir sind Software-Engineers, die auch preisverdächtige Motion-Arbeit liefern. Die aufwendige 3D- und Scroll-Scrub-Ebene bauen wir von Hand und halten sie innerhalb eines Core-Web-Vitals-Budgets — 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-Narrative auf Basis von GSAP 3.15 (jetzt komplett kostenlos, inklusive aller Plugins) und ScrollTrigger, mit Lenis für ein flüssiges Smooth-Scroll-Modell. Wir behandeln Scroll wie ein Cutter die Timeline — ein paar gut abgestimmte Szenen statt fünfzehn — damit die Geschichte als Handwerk wirkt und nicht als Überladung.
02
Echtzeit-3D (Three.js / R3F)
Von Hand gebaute WebGL-Szenen mit Three.js r184 oder React-Three-Fiber 9 + drei 10, wenn die Szene von komponentenbasierter Komposition profitiert. WebGPU dort, wo die Last es rechtfertigt (aufwendige Partikel, Compute, Post) — stets mit automatischem WebGL2-Fallback, damit niemand vor einem leeren Canvas sitzt.
03
Frame-Sequenz-Scroll-Scrub (Apple-Stil)
Der Einstieg im Apple-Stil — ein in Einzelbilder zerlegter Film, der beim Scrollen auf ein Canvas gezeichnet wird — ist eine Technik, die wir selbst entwickeln (Canvas + ScrollTrigger), keine Bibliothek, die wir einfach einbinden. Aktuell entwickeln wir einen cineastischen Scroll-Scrub-Einstieg für eine Luxus-Brillenmarke: ein Scrub über den kompletten Film, der nahtlos ins Grid übergeht.
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)
Von Designern erstellte Vektor-Motion über Lottie / dotLottie für Icons und Illustrationen, und Rive, wenn eine Animation zustandsbehaftet und datengesteuert sein muss. Klein, scharf und auflösungsunabhängig — das passende Werkzeug für leichte Animationen statt einer schweren 3D-Szene.
06
Auf Next.js gebaut
Die cineastische Ebene lebt in isolierten, rein clientseitigen Inseln, die nahe am Viewport lazy gemountet werden; der Rest der Site bleibt statisch und schnell. Die Hydration-Kosten sind der entscheidende Performance-Hebel auf einer 3D-Site, und wir kalkulieren sie bewusst ein — Three.js landet nie in Ihrem initialen Bundle.
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 aus Animation und Hydration, damit die Seite reaktiv bleibt, während sie sich bewegt.
CLS≤ 0,1
Cumulative Layout Shift
Für jedes Canvas- und Medien-Element wird der Platz von Anfang an reserviert, sodass Scroll-Reveals und nachladendes 3D das Layout nie verschieben.
Alle drei Werte werden im 75. Perzentil echter Nutzer gemessen — die Zielwerte müssen im Feld halten, nicht nur im Laborlauf. Nutzer mit reduzierten Bewegungseinstellungen erhalten standardmäßig eine saubere, schnelle statische Variante; essenzielle Animation wird ersetzt statt entfernt. Und jede Site wird mit einer schlanken Mobil-Szene und einem automatischen WebGL2-Fallback für Geräte ohne WebGPU ausgeliefert.
🖼Core Web Vitals vorher / nachher — echte Lighthouse-Messwerte (in Kürze)
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 legen die Core-Web-Vitals-Zielwerte und die Barrierefreiheits-Regeln (reduzierte Bewegung, Tastaturbedienung, Pause-Steuerung) von Anfang an fest — damit die cineastische Ebene daran gemessen wird und nicht im Nachhinein drangeschraubt.
03
Hero-Szene prototypisieren
Wir bauen die schwierigste Szene zuerst — das Scroll-Scrub- oder 3D-Herzstück — und weisen nach, dass sie das Budget auf einem echten Mittelklasse-Smartphone trifft, bevor der Rest der Site überhaupt existiert.
04
Als isolierte Inseln bauen
Die aufwendige 3D-/Scroll-Ebene wird als rein clientseitige Insel entwickelt, die nahe am Viewport lazy gemountet wird, während der Rest der Seite statisch und serverseitig gerendert bleibt.
05
Asset-Pipeline optimieren
GLTF mit Draco-/Meshopt-Kompression, KTX2-Texturen, gedeckelte Texturgrößen und Poly-Budgets je Gerät, dazu eine schlanke Mobil-Szene oder ein statisches Poster, wo es sich auszahlt.
06
Ausliefern & messen
Wir gehen live und beobachten echte Nutzermetriken, nicht nur einen Lighthouse-Score im Labor. Das Budget halten wir auch nach dem Launch ein — es ist keine Zahl, die wir einmalig nennen.
DIE ARBEIT
Wie das in Bewegung aussieht
▶Interaktive 3D-Demo — eine Live-WebGL-/R3F-Szene, die nahe am Viewport lazy gemountet wird (in Kürze)
Eine in sich geschlossene 3D-Insel — so entwickelt, dass sie erst beim Scrollen in den sichtbaren Bereich mountet und dem Rest der Seite damit nie das Budget kostet.
▶Build-Reel — Bildschirmaufnahmen echter scrollgesteuerter und 3D-Arbeiten (in Kürze)
Kurze Aufnahmen echter Builds — scrollgesteuertes Storytelling, Shader-Arbeit und der Scroll-Scrub-Einstieg, der gerade entsteht. Diskretion gehört dazu; wir setzen keine Kundennamen auf unser Reel.
Preisverdächtige Motion ist ein Handwerk, das wir entwickeln, kein Plugin, das wir installieren. Der 3D- und Scroll-Scrub-Stack — GSAP, Motion, Lenis, Three.js, React-Three-Fiber — wird projektbezogen ergänzt und auf das Budget hin gebaut, nicht als Blackbox ausgeliefert, der Sie blind vertrauen müssen. Wir versprechen Handwerk und Performance, an denen wir uns selbst messen lassen — nicht die beste Website aller Zeiten und 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
Verlangsamen 3D und aufwendige Animation nicht meine Site?
Genau das ist der Fehlerfall, den wir vermeiden. Wir legen ein Core-Web-Vitals-Budget fest — LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 im p75 — bevor wir einen einzigen Shader schreiben, und wir halten die cineastische Ebene daran. Three.js ist nie in Ihrem initialen Bundle; die 3D- und Scroll-Scrub-Ebene mountet als isolierte, rein clientseitige Insel erst lazy, wenn sie nahe am Viewport ist, während der Rest der Seite statisch und schnell bleibt. „Schnell UND cineastisch“ ist ehrlich, weil wir es von vornherein einkalkulieren — nicht, weil wir Glück hatten.
Was ist mit Mobil und Barrierefreiheit?
Beides ist von Anfang an eingeplant, nicht nachträglich geflickt. Wir liefern zuerst eine saubere, schnelle statische Variante und legen Animation nur für Nutzer darüber, die keine Reduzierung gewünscht haben — Nutzer mit reduzierten Bewegungseinstellungen erhalten standardmäßig eine ruhige, vollständig lesbare Site, bei der essenzielle Animation ersetzt wird (ein Fade statt eines Zooms) statt Inhalte zu streichen. Auf Mobilgeräten läuft eine schlanke Szene oder ein statisches Poster, mit automatischem WebGL2-Fallback für den kleinen Anteil der Geräte ohne WebGPU. Automatisch abspielende oder loopende Inhalte erhalten Pause-Steuerungen, und die Bewegungssteuerung ist per Tastatur bedienbar mit sichtbarem Fokus.
Warum nicht einfach Webflow oder Framer nutzen?
Für dekoratives 3D — einen rotierenden Globus, leichten Parallax — sind Builder völlig in Ordnung, und wir sagen Ihnen, wann das die richtige Wahl ist. Sobald Sie echte WebGL-Shader, Physik, große optimierte GLTF oder interaktive Three.js-/R3F-Szenen brauchen, müssen Sie von Hand programmieren, und das Blackbox-React eines Builders bringt einen Overhead mit, der bei aufwendiger Animation für Layout-Shift anfällig ist. Wir sind Software-Engineers, die auch preisverdächtige Motion-Arbeit liefern: keine Plattform-Decke, kein Lock-in, Code, der Ihnen gehört, und Performance, die wir tatsächlich garantieren können. Webflows Code Components sind ein hybrider Weg — aber die aufwendige Komponente wird weiterhin von Hand entwickelt, von jemandem wie uns.
Wie unterscheiden Sie sich von einem Design-Studio?
Viele preisverdächtige Sites stammen aus Studios, die die Animation beherrschen, sie aber ruckelig ausliefern — INP oder CLS verfehlen, auf Mobilgeräten brechen, reduzierte Bewegung ignorieren. Wir bringen dieselbe visuelle Decke plus das Engineering: Core-Web-Vitals-Budgets, Barrierefreiheit, saubere Asset-Pipelines und Mobil-/Fallback-Handling. Oft sind wir der Partner, an den ein Design-Studio den performanten Build vergibt. Wir versprechen Handwerk und Performance, an denen wir uns selbst messen lassen — nicht „die beste Website aller Zeiten“ und keinen Preis, den wir nicht gewonnen haben.
Wie lange dauert es und wie wird es berechnet?
Pro Projekt, nachdem wir den Umfang verstanden haben — für diese Art von Arbeit gibt es keinen Listenpreis. Wir empfehlen eine phasenweise Lieferung: zuerst ein schnelles, cineastisches Hero ausliefern und dann ohne Neubau in Multi-Szenen- oder Konfigurator-Arbeit hineinwachsen, sobald es echte Resonanz gibt, die das rechtfertigt. Ein fokussierter Hero-Visual-Build dauert wenige Wochen; ein anspruchsvoller Multi-Szenen- oder interaktiver Launch dauert länger. Sagen Sie uns, was die Site leisten muss, und wir schätzen den Umfang ehrlich ein. Fragen Sie ein Angebot an — wir setzen keine feste Zahl auf einen individuellen Build.
Gehört uns der Code, oder sind wir an Sie gebunden?
Er gehört Ihnen. Wir bauen von Hand mit offenen Standard-Werkzeugen — GSAP, Motion, Lenis, Three.js, React-Three-Fiber — in Ihrem eigenen Repository, ohne proprietäre Builder-Runtime dazwischen. Es gibt keine Pro-Platz-Gebühr, keine Plattform, die Sie nicht verlassen können, und Ihre eigenen Engineers können das Ergebnis betreiben und erweitern. Diskretion gehört dazu: Wir setzen Ihren Namen ebenso wenig auf unsere Website.
Last reviewed:
BEREIT FÜR EIN GESPRÄCH?
Sagen Sie uns, was die Site leisten muss
Erzählen Sie uns vom Markenmoment, vom Launch oder vom Konfigurator, den Sie im Sinn haben — und wir schätzen einen cineastischen Build ein, mit einem Core-Web-Vitals-Budget, das von Anfang an festgeschrieben ist. Individuelle Arbeit berechnen wir pro Projekt, deshalb ist der nächste Schritt ein Gespräch, keine Zahl.