客户的产品已经跑通了——200多个AI代理，覆盖9个业务部门，服务D2C品牌。但官网呢？一段文字加一个联系表单。他们知道该改，只是一直没动手。

我们接了这个活儿。Next.js + TypeScript + Tailwind + GSAP，完整重建。四周交付，范围固定，没有意外。

打开网易新闻 查看精彩图片

先说说动画。首页hero区域做了动态展示，不是用文字描述产品能做什么，而是直接让你看到。9个业务部门的展示用了标签页切换，全部塞进一个区块，但不显得拥挤。还做了实时代理控制台UI——访客不用注册就能感受到产品长什么样。数据和客户logo用bento网格布局，视觉上更紧凑。

一个反复出现的约束：产品本身很技术，但买家不全是开发者。每个区块都要让不懂"AI代理"是什么的D2C品牌老板也能看懂。这意味着术语要过滤，流程要直观，不能假设用户有技术背景。

GSAP的部分值得单独讲。服务区块用了横向滚动——页面往下滚时，整个轨道往左滑，固定在视口内。麻烦的是计算滑动距离：track.scrollWidth 减去 window.innerWidth，而这个数字每次窗口缩放都会变。GSAP的解法是用函数传值，而不是固定像素，加上 invalidateOnRefresh: true，让 ScrollTrigger 每次缩放自动重新计算。外面再包一层 gsap.matchMedia，只在桌面端激活，移动端回退到普通垂直堆叠。

结果：lancemart.org 已上线。