关于这个模板
Innovation Lab 是面向创意机构或工作室的一份可用参考：这套落地页已经排好、量好，可以直接照着复刻。“We push past conventions, reshaping the virtual terrain with next-level technologies” 就是整套版式要承载的那一行。配色控制在深靛蓝色 #080219 打底、白色 #F8F3EF 给文字之内，字体用 Inter。交付形式是 React 和 Tailwind CSS，收录于 1466x1080，所以画幅在任何一行代码写下去之前就已经定好。这个页面的动效控制在0.2s 的过渡、cubic-bezier(0.16, 1, 0.3, 1)、一段循环视频打底。写作时让它开着：能迁移到你页面上的，是那份 6,911 字符的简报。
适合谁
- 这一版落地页服务的是需要一屏证据、证明创意机构的文案能扛住 6.9s 的循环视频的创始人。
- 给要改写一版落地页、标题长度又得和Innovation Lab一样的内容负责人用。
- 对着线上站点定动效规范的设计师，会照字面用 0.2s 这个数值和 cubic-bezier(0.16, 1, 0.3, 1) 曲线。
包含哪些内容
- 一行到底，不做抽屉. 一条细导航压在落地页上，字标在左，链接用 Inter 排，整套构图因此先读成内容、再读成界面。导航条悬在 1466x1080 的构图上，自己没有底色，素材因此从它下面通到两边。
- 间距档位是写明的. 需求简报钉死 12px 间距、0.2s 的过渡、cubic-bezier(0.16, 1, 0.3, 1) 缓动曲线，其余交给摆放，这正好和一套会自己长大的比例相反。画幅比例和尺寸记在一起，重建时连比例也一起对。
- 一条会主动让开的导航. 一条细导航压在落地页上，字标在左，链接用 Inter 排，整套构图因此先读成内容、再读成界面。导航条悬在 1466x1080 的构图上，自己没有底色，素材因此从它下面通到两边。把这一行控制在单行。
- 封面帧也算数. 1466x1080 的视频在文案后面循环播放 6.9s，静音、行内，两者之间没有任何色罩层。自动播放不可用时，1466x1080 的封面帧撑住构图，版式不会塌。
动效与交互
是循环，不是时间轴
整个环境层就是一段 6.9s 的片段：它在文案后面播放，循环看不出接缝，也从不响应指针。循环按 cover 裁切，构图因此不依赖某个固定的画面尺寸。拍摄或导出按 1466x1080 或更宽的尺寸。
入场就是签名动作
入场负责让页面“到达”，跑完之后构图不再变化：每一行从裁切窗口里升起。实现上是几个过渡，没有引入动画库。这份参考在 1466x1080 下收录。
在 Innovation Lab 里先改什么
需求简报写明了 Inter 和它旁边的字阶。换成比例相同的字体，构图就能活下来。替换比重新构图便宜，这正是重点。
把 Innovation Lab 当规格书读
6,911 个字符的需求简报产出的是一份完整规格。真正承重的部分很短：12px 间距、0.2s 的过渡、cubic-bezier(0.16, 1, 0.3, 1) 缓动曲线。这个落地页里没有任何一处依赖默认值。
这个落地页怎么重排
这个落地页先按 1466x1080 构图，再为窄屏重排一次。字阶是流体的，而不是阶梯式的，所以手机版是一个决定，而不是把宽屏挤小。窄屏下没有丢掉任何重要的东西。
常见问题
复制 Innovation Lab 的需求简报，我能拿到什么？
简报是从页面上收录下来的，共 6,911 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
重建 Innovation Lab 必须用 React 和 Tailwind CSS 吗？
Innovation Lab 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Innovation Lab 的动效是由什么驱动的？
入场和状态切换都落在 0.2s 这个区间内使用 cubic-bezier(0.16, 1, 0.3, 1)，由状态变化触发而不是滚动库，也从不会拖住文案。
