Koca Ventures Ltd
71-75 Shelton Street
Covent Garden, London
WC2H 9JQ, United Kingdom
Registered in England & Wales — 16231043
高端网站与 3D
电影感网站，由工程实现——既快又有电影感，靠工程而非运气。
多数获奖级网站要么出自设计工作室，动效做得漂亮却跑得卡顿；要么出自模板作坊，速度够快却一碰到真正的 WebGL 就触到天花板。我们是同时也能做获奖级动效的软件工程师。重度 3D 与滚动逐帧播放这一层由我们亲手搭建，并严守 Core Web Vitals 预算——所以它既有电影感又快，靠的是工程，不是运气。
▶滚动逐帧入场——我们正为一家奢侈眼镜品牌打造的整片画布逐帧播放（即将上线）
能力
亲手搭建的电影感图层
01
滚动驱动的叙事
用 GSAP 3.15（现已 100% 免费，所有插件全部包含）与 ScrollTrigger 构建电影感的滚动叙事，并以 Lenis 实现平滑滚动模型。我们对待滚动就像剪辑师对待时间线——只设几个精心调校的场景，而非十五个——让故事读起来是匠心，而非堆砌。
02
实时 3D（Three.js / R3F）
用 Three.js r184 亲手搭建 WebGL 场景；当场景能从组件化组合中获益时，则采用 React-Three-Fiber 9 + drei 10。当工作负载（大量粒子、计算、后处理）值得时启用 WebGPU——并始终配备自动的 WebGL2 回退，让任何人都不会看到一块空白画布。
03
逐帧序列滚动播放（Apple 式）
Apple 式入场——把一段影片解码为帧、随滚动逐帧绘制到画布上——是我们自行工程实现的技术（canvas + ScrollTrigger），而非随手引入的现成库。我们正为一家奢侈眼镜品牌打造一个电影感滚动逐帧入场：整片逐帧播放，再平滑过渡到网格布局。
04
Shader 与材质
定制 shader 与材质，包括 WebGPU 路径上基于节点的 TSL，并克制地使用。高级效果由优化与回退来约束，让视觉奇观永远不会以性能预算为代价。
05
矢量动效（Lottie / Rive）
图标与插画采用设计师制作、经 Lottie / dotLottie 输出的矢量动效；当动画需要带状态、由数据驱动时则采用 Rive。体积小、画面锐利、分辨率无关——对于轻量动效，这才是对的工具，而非搬出一套笨重的 3D 场景。
06
基于 Next.js 构建
电影感图层存在于隔离的、纯客户端的孤岛中，在接近视口时才延迟挂载；网站其余部分保持静态且快速。在 3D 网站上，hydration 开销是性能的首要杠杆，我们会刻意为它编预算——Three.js 绝不会进入你的初始 bundle。
性能与无障碍承诺
在写下第一个 shader 之前就定好的 Core Web Vitals 预算
LCP≤ 2.5s
最大内容绘制
一张快速加载的海报 / 首帧会尽早绘制——重度画布主视觉永远不会阻塞最大内容的绘制。
INP≤ 200ms
下一次绘制的交互延迟
最难达标的一项。我们把动画与 hydration 引发的长主线程任务拆开，让页面在运动的同时仍保持响应。
CLS≤ 0.1
累积布局偏移
我们会预先为每个画布和媒体元素预留空间，因此滚动揭示与延迟加载的 3D 永远不会让布局发生位移。
这三项指标都按真实用户的第 75 百分位测量——目标必须在真实环境中达标，而不只是在实验室跑分里。偏好减弱动效的用户默认获得干净、快速的静态体验；必要的动效是被替换而非被删除；每个网站都附带精简的移动端场景，以及面向无 WebGPU 设备的自动 WebGL2 回退。
🖼Core Web Vitals 前后对比——真实的 Lighthouse 实测数据（即将上线）
我们如何工作
从分镜到我们守得住的预算
01
调研与分镜
动手开发之前先梳理故事——哪几个少数场景承载品牌、滚动节拍落在何处，以及网站除了好看之外还得做到什么。
02
设定 CWV + 无障碍预算
我们在一开始就约定好 Core Web Vitals 目标与无障碍规则（减弱动效、键盘操作、暂停控件）——让电影感图层从一开始就受其约束，而不是事后再硬加上去。
03
原型化主视觉场景
我们先做最难的那一个场景——滚动逐帧或 3D 核心场景——并在网站其余部分尚未存在时，就在一台真实的中端手机上验证它达标。
04
以隔离孤岛方式构建
重度的 3D / 滚动图层被工程化为纯客户端的孤岛，在接近视口时才延迟挂载，而页面其余部分保持静态、由服务端渲染。
05
优化资源管线
采用经 Draco / Meshopt 压缩的 GLTF、KTX2 纹理，并按设备设定纹理尺寸上限与面数预算，再在值得之处配上精简的移动端场景或静态海报。
06
上线与度量
我们上线后会盯着真实用户的指标，而不只是实验室里的一个 Lighthouse 分数。预算是上线之后要持续守住的东西，而不是只报一次的数字。
作品
它运动起来是什么样
▶交互式 3D 演示——一个实时的 WebGL / R3F 场景，在接近视口时才延迟挂载（即将上线）
一个自包含的 3D 孤岛——经工程设计，只在滚动进入视野时才挂载，所以它永远不会让页面其余部分付出性能预算的代价。
▶作品集锦——真实滚动驱动与 3D 工作的屏幕录制（即将上线）
真实项目的简短录制片段——滚动驱动的叙事、shader 工作，以及正在进行中的滚动逐帧入场。保密是合作的一部分；我们不会把客户名字放进我们的作品集锦。
获奖级动效是我们工程实现的一门手艺，而非随手安装的一个插件。这套 3D 与滚动逐帧栈——GSAP、Motion、Lenis、Three.js、React-Three-Fiber——是按项目逐一加入、为预算量身构建的，而不是丢给你一个只能选择信任的黑盒。我们承诺的是自我约束的匠心与性能，而不是号称史上最好的网站，也不是一座我们尚未拿过的奖。
已经在做动效网站： 这是高于我们 动效网站作品之上的高端 3D 级别。同样的工程标准，在电影感与实时 3D 图层上有更高的上限。
常见问题
直截了当的回答
3D 和重度动效会不会拖慢我的网站？
这正是我们存在的意义所在——为了避免这种失败。我们在写下第一个 shader 之前，就设定好 Core Web Vitals 预算——p75 下的 LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1——并让电影感图层严守这一预算。Three.js 绝不会进入你的初始 bundle；3D 与滚动逐帧图层只在接近视口时，才作为隔离的纯客户端孤岛延迟挂载，而页面其余部分保持静态且快速。“既快又有电影感”之所以是诚实的说法，是因为我们一开始就为它编了预算，而不是碰巧走运。
移动端和无障碍方面呢？
两者都是从一开始就设计进去的，而不是事后打补丁。我们先交付一个干净、快速的静态体验，再只为没有要求减弱动效的用户叠加动效——偏好减弱动效的用户默认获得一个平和、完全可读的网站，必要的动效会被替换（用淡入代替缩放）而非删除内容。在移动端，我们运行精简场景或静态海报，并为少数无 WebGPU 的设备提供自动 WebGL2 回退。自动播放或循环的内容会配上暂停控件，动效控件也可通过键盘操作并带有可见焦点。
为什么不直接用 Webflow 或 Framer？
对于装饰性的 3D——一个旋转的地球、轻微的视差——这类建站工具完全够用，该用时我们会直说。可一旦你需要真正的 WebGL shader、物理、经过优化的大型 GLTF，或交互式的 Three.js / R3F 场景，就必须手写代码；而建站工具的黑盒 React 会带来额外开销，在重度动画下还容易被标记为布局偏移。我们是同时也能做获奖级动效的软件工程师：没有平台天花板，没有锁定，代码归你所有，性能我们也真正担保得了。Webflow 的 Code Components 是一条混合路径——但其中那个重度组件，仍然要由像我们这样的人亲手工程实现。
你们和设计工作室有什么不同？
许多获奖级网站出自工作室之手，动效做得漂亮却跑得卡顿——INP 或 CLS 不达标、在移动端崩坏、忽视减弱动效。我们带来同样的视觉上限，外加工程能力：Core Web Vitals 预算、无障碍、规范的资源管线，以及移动端 / 回退处理。我们常常就是设计工作室把高性能开发分包出去的那个合作方。我们承诺的是自我约束的匠心与性能——而不是“史上最好的网站”，也不是一座我们尚未拿过的奖。
需要多久，又是怎么定价的？
按项目定价，且要在我们了解范围之后——这类工作没有标价。我们建议分阶段交付：先上线一个快速、有电影感的主视觉，待有真实的关注度足以支撑时，再无需重做地扩展到多场景或配置器级别的工作。一个聚焦于主视觉的开发是几周；一个进阶的多场景或交互式上线则更久。把网站需要做到什么告诉我们，我们会诚实地评估范围。申请报价——对于定制开发，我们不会给一个固定数字。
代码归我们所有，还是会被你们锁定？
归你所有。我们在你自己的代码仓库里，基于开放的标准工具——GSAP、Motion、Lenis、Three.js、React-Three-Fiber——亲手开发，中间没有任何专有的建站运行时。没有按席位收的费用，没有你离不开的平台，你自己的工程师就能运行并扩展成果。保密是合作的一部分：我们也不会把你的名字放上我们的网站。
Last reviewed:
准备好聊聊了吗？
告诉我们网站需要做到什么
把你心里的那个品牌时刻、那场发布，或那个配置器告诉我们——我们会规划一个从一开始就写入 Core Web Vitals 预算的电影感开发方案。定制工作我们按项目定价，所以下一步是一次对话，而不是一个数字。