关于这个模板
Cyber Layer 是面向AI 或 SaaS 产品的落地页参考，它背后的需求简报是一份完整的构建规格书，而不是情绪板。整套配色是红色 #B01617 打底、浅调 #E6E6E6 给文字，页面字体是 Space Grotesk。交付形式是一个自包含的 HTML 文件，收录于 1460x1080，所以画幅在任何一行代码写下去之前就已经定好。这个页面的动效控制在1000ms 的过渡、cubic-bezier(.16,1.3,1)、一段循环视频打底。写作时让它开着：能迁移到你页面上的，是那份 14,235 字符的简报。
适合谁
- 正在写构建需求、想拿 cubic-bezier(.16,1.3,1) 缓动曲线作为讨论依据的工作室团队。
- 接手这版落地页的外包团队，需要在第一次提交之前把一个自包含的 HTML 文件钉进仓库里。
- 这个落地页面向的是已经熟悉一个自包含的 HTML 文件、只差把 599px 断点写下来的团队。
包含哪些内容
- 导航收在一行. 导航条压在落地页之上，而不是把它往下挤，构图因此保住首屏的完整高度。599px 以下链接直接收起，而不是折到第二行。
- 素材垫在文字后面. 视频落在 1460x1080 构图的最底层，文字排在它之上，两者之间什么都没有。自动播放不可用时，1460x1080 的封面帧撑住构图，版式不会塌。
- 靠展示字号说话. 由 Space Grotesk 一个字体挑大梁：从标题到支撑句字号断得很干脆，字号越大字距收得越紧，层级因此由字体承担，而不是靠颜色。只要字号和字重留在需求简报放的位置，换字体就是安全的。展示行留到最后再排。
- 该流体的时候就流体. 宽度变化由字体自己消化：25px 到 82px 的 clamp 让标题从手机一路撑到桌面，不需要另做一套移动端构图。视口变窄时，字体的角色不变，只是尺寸变。
动效与交互
文字分片到达
标题不是整块淡入：每一行从裁切窗口里升起。这正是它和静帧的区别，因为叙事是由文字出现的顺序完成的。动画只在加载时跑一次，不跟着滚动重播，所以你读的时候页面不会反复表演。这份参考在 1460x1080 下收录。
要画布，不要图片
主体是实时渲染出来的（一块 WebGL 画布），而不是一张图片，所以 1460x1080 的构图会回应视口，而不是待在后面不动。它是渲染而不是静帧，所以视觉焦点在任何尺寸下都站得住。
Cyber Layer 怎么安排第一次阅读的顺序
代价是要读者有耐心：可扫读的栅格会立刻交出的细节，这一页先扣着。换来的是一个导航、标题、数据行、背景片段、页脚不会被误读的首屏。 SaaS读者先看到主张，再看到选项。这份参考在 1460x1080 下收录。
把这个落地页变成你自己的
一上来先换配色是常见的错。它只改了气氛，没碰构图，撑住版式的仍然是100vh 高的板块、82px 间距；先做文案和素材，配色放到最后。新文案仍按同样的展示字号排，并且在加任何东西之前先重新对一遍对比度。
把 Cyber Layer 当规格书读
截图告诉你页面长什么样，需求简报告诉你为什么。100vh 高的板块、82px 间距、1000ms 的过渡、cubic-bezier(.16,1.3,1) 缓动曲线、599px 断点把这两者之间的差补上。这个落地页里没有任何一处依赖默认值。
常见问题
Cyber Layer 有多少地方依赖一个自包含的 HTML 文件？
Cyber Layer 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Cyber Layer 背后的提示词到底有多长？
简报是从页面上收录下来的，共 14,235 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
Cyber Layer 的动效是由什么驱动的？
动效和版式写得一样细：状态切换落在 1000ms 区间内使用 cubic-bezier(.16,1.3,1)。先复刻构图、再对时长，因为版式立住之后时长更好对。
