关于这个模板
Immersive Ocean 展示了为创意机构或工作室做首屏的一种做法，并把生成它的说明一起公开。页面自己的标题是“Shaping visual narratives, one pixel at a time”，整个构图就是围绕这串字搭的。配色是深蓝色 #000410 打底、灰色 #C2CFCA 给文字、青绿色 #0E4154 承担强调色，字体用 Geist。交付形式是 React 和 Tailwind CSS，收录于 640x478，所以画幅在任何一行代码写下去之前就已经定好。动效预算就是cubic-bezier(0.16,1,0.3,1)。这份参考是给这样的创意机构或工作室用的：希望首屏在动手构建之前就已经定下来。收录的提示词记录于 640x478，所以这一页引用的每个数值都能追回到它。
适合谁
- 需要先看数字的设计师：100vh 高的板块、80px 间距，全部引自需求简报。
- 用提示词给首屏提需求的人，会把这份 4,030 字符的提示词当作起点。
- 给要改写一版首屏、标题长度又得和Immersive Ocean一样的内容负责人用。
包含哪些内容
- 导航是刻意做细的. 导航条上只有字标、板块链接和一个 #0E4154 按钮，尺寸按 100vh 高的板块、80px 间距定，永远不会长成第二个页头。链接比字标小一档，#0E4154 操作是导航条上唯一有分量的元素。一条导航只放一个操作。
- 一套字一个职责. 字体是按职责分配的，不是混着用：Geist 同时承担展示文字和界面文字。字距按字号分别设定，展示行和注释不共用同一个字距值。
- 每个尺寸都写下来了. 版式是对着一组固定值（100vh 高的板块、80px 间距、cubic-bezier(0.16,1,0.3,1) 缓动曲线）解出来的，首屏在任何宽度下因此都保持成构图。字体和版式共用同一套档位，换掉其中一样时不会有东西漂移。换字体、换文案可以，别换字阶。
- 样式交给字体. 字体是按职责分配的，不是混着用：Geist 同时承担展示文字和界面文字。字距按字号分别设定，展示行和注释不共用同一个字距值。展示行留到最后再排。
动效与交互
状态变化也有时长
状态变化的时长写明为 0，所以控件上的反馈是一个设计过的值，不是浏览器默认值。数值足够短，读起来是反馈，而不是动画。这份参考在 640x478 下收录。
交互限制在局部
交互层很小，也很好预期：悬停态只给按钮和链接，而不是每张卡片。其他部分都不动，重心因此留在构图上。可交互目标大到能点，指针处理在这些目标上保持一致。这份参考在 640x478 下收录。
这个首屏怎么重排
桌面端构图是照着 640x478 解出来的，窄屏版式是设计出来的，不是继承来的：板块高度锁在 100vh、导航收进移动端菜单。动效带减少动态效果分支，素材带首帧封面，所以自动播放不可用时页面依然能表达自己。窄屏版式是一个决定，而不是把宽屏挤小，层级在窄屏上依然成立。
把这个首屏变成你自己的
需求简报写明了 Geist 和它旁边的字阶。换成比例相同的字体，构图就能活下来。在重新配色之前，先把文案和素材改完。
Immersive Ocean 怎么安排第一次阅读的顺序
把你自己的文案放进这个首屏，顺序依然成立，因为这些元素不能互换：导航、公告徽标、数据行、功能列表、背景片段各自只负责一件事。创意机构读者先看到主张，再看到选项。这份参考在 640x478 下收录。
常见问题
Immersive Ocean 的提示词是定稿规格，还是只是一个起点？
它是构建简报，不是感觉描述：写明 640x478 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
重建 Immersive Ocean 必须用 React 和 Tailwind CSS 吗？
Immersive Ocean 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
在客户项目里该怎么处理 Immersive Ocean 的素材？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 640x478 下收录。
