Koca Ventures Ltd
71-75 Shelton Street
Covent Garden, London
WC2H 9JQ, United Kingdom
Registered in England & Wales — 16231043
高端网站与 3D
电影感网站，靠工程实现。
我们是软件工程师，同时做得了获奖水准的动效。我们手工构建网站中最重的 3D 与滚动逐帧层，并让它严守 Core Web Vitals 预算——电影感与速度兼得，靠工程，不靠运气。
▶滚动逐帧入场——我们正为一家奢侈眼镜品牌打造的整片画布逐帧播放（即将上线）
能力
亲手搭建的电影感图层
01
滚动驱动的叙事
用 GSAP、ScrollTrigger 和 Lenis 打造电影感的滚动叙事。我们对待滚动就像剪辑师对待时间线——几个精心调校的场景，而不是十五个——让故事读起来是工艺，而不是堆砌。
02
实时 3D（Three.js / R3F）
用 Three.js 手工构建 WebGL 场景；当场景适合组件化组合时用 React-Three-Fiber。负载确有必要时用 WebGPU——并始终自动回退到 WebGL2，不会让任何人面对一块空白画布。
03
逐帧序列滚动播放（Apple 式）
Apple 风格的开场——影片解码成帧，随滚动绘制到画布上——是我们亲手做工程的技术，不是随手引入的库。目前我们正在为一个奢侈眼镜品牌构建这样一套。
04
Shader 与材质
定制 shader 与材质，包括 WebGPU 路径上基于节点的 TSL，并克制地使用。高级效果由优化与回退来约束，让视觉奇观永远不会以性能预算为代价。
05
矢量动效（Lottie / Rive）
图标与插画用 Lottie 呈现设计师制作的矢量动效；动画需要状态与数据驱动时用 Rive。体积小、边缘锐利、与分辨率无关——轻量动效的正确工具。
06
基于 Next.js 构建
电影感图层放在 Next.js 上隔离的纯客户端孤岛中；网站其余部分保持静态。Hydration 开销是 3D 网站最主要的性能杠杆，我们会有意识地为它做预算。
性能与无障碍承诺
在写下第一个 shader 之前就定好的 Core Web Vitals 预算
LCP≤ 2.5s
最大内容绘制
一张快速加载的海报 / 首帧会尽早绘制——重度画布主视觉永远不会阻塞最大内容的绘制。
INP≤ 200ms
下一次绘制的交互延迟
最难达标的一项。我们拆分主线程长任务，让页面在动效进行时依然保持响应。
CLS≤ 0.1
累积布局偏移
每个画布与媒体元素的空间都预先保留，后加载的 3D 永远不会推移布局。
三项指标都按真实用户第 75 百分位测量——目标必须在线上扛得住，而不只是实验室跑分。开启“减少动态效果”的用户默认获得干净快速的静态体验。
我们如何工作
从分镜到我们守得住的预算
01
调研与分镜
动手开发之前先梳理故事——哪几个少数场景承载品牌、滚动节拍落在何处，以及网站除了好看之外还得做到什么。
02
设定 CWV + 无障碍预算
Core Web Vitals 目标与无障碍规则——减少动态效果、键盘操作、暂停控件——在开工前就约定好，让电影感图层受其约束。
03
原型化主视觉场景
先做最难的场景——滚动逐帧或 3D 核心视觉——并在真实的中端手机上证明它达到预算。
04
以隔离孤岛方式构建
重型图层以纯客户端孤岛实现，临近视口才惰性挂载；页面其余部分保持静态与服务端渲染。
05
优化资源管线
GLTF 配 Draco / Meshopt 压缩、KTX2 纹理、按设备封顶的多边形预算，以及在确有必要处启用的精简移动端场景。
06
上线与度量
上线后我们盯的是真实用户指标，而不只是实验室的 Lighthouse 分数。预算是上线后持续守住的承诺，不是引用一次的数字。
获奖水准的动效是我们亲手做的工程，不是装一个插件——技术栈按项目添加、按预算构建，而不是一只您只能选择信任的黑盒。我们承诺的是自我约束的工艺与性能，而不是一座我们没拿过的奖。
已经在做动效网站： 这是高于我们 动效网站作品之上的高端 3D 级别。同样的工程标准，在电影感与实时 3D 图层上有更高的上限。
常见问题
直截了当的回答
移动端和无障碍方面呢？
两者都是设计内置，不是事后补丁。开启“减少动态效果”的用户默认获得平静、完整可读的网站，必要动效以替代呈现而非直接删除。移动端运行精简场景或静态海报，自动回退 WebGL2——自动播放也始终配有暂停控件。
为什么不直接用 Webflow 或 Framer？
装饰性 3D——旋转地球、轻微视差——建站工具足够用，我们也会直说。一旦需要 WebGL 着色器、物理仿真、优化过的 GLTF 或可交互的 Three.js 场景，建站工具就触顶了；那一层必须手写代码，而我们会按预算把它做出来。
你们和设计工作室有什么不同？
不少工作室动效做得漂亮，交付却很卡——INP 或 CLS 不达标、移动端崩坏、无视“减少动态效果”。我们提供同等的视觉上限，再加上工程：Core Web Vitals 预算、无障碍、资产管线、回退处理。设计工作室把高性能实现外包给谁？常常就是我们。
如何定价？
按项目报价——没有标准价目表。典型路径：一段短期付费范围界定，一次固定范围的构建，之后是可选的长期服务。把问题告诉我们，我们会如实界定范围。
代码归我们所有，还是会被你们锁定？
归您所有。我们用开放、标准的工具——GSAP、Lenis、Three.js、React-Three-Fiber——在您自己的仓库里手工构建，中间没有任何私有建站运行时。没有按席位费用，没有离不开的平台；您自己的工程师就能扩展它。
3D 网站会影响 SEO 吗？
只要按 Core Web Vitals 预算做工程，就不会——这正是我们构建方式的全部意义。内容保持服务端渲染、可被抓取，3D 层在客户端惰性挂载，LCP、INP、CLS 目标在写第一个着色器之前就已定下。
做一个 3D 网站需要多长时间？
聚焦的主视觉构建通常需要几周；高级的多场景或交互式发布则要数月。我们建议分阶段交付——先上线一个快速的电影感主视觉，再扩展到多场景，无需推倒重建。时间表在范围沟通后报出。
Last reviewed:
准备好聊聊了吗？
告诉我们网站需要做到什么
说说您设想中的品牌时刻、新品发布或产品配置器，我们会界定一个从一开始就写入 Core Web Vitals 预算的电影感构建方案。