关于这个模板
Planetary Pulse 是面向教育或社区品牌的首屏参考，它背后的需求简报是一份完整的构建规格书，而不是情绪板。配色控制在灰色 #C2CCD3 打底之内，字体用 Helvetica, Arial。这份参考用 Tailwind 和原生 JavaScript 构建，但版式上的决定都独立于它写清楚了。动效预算就是300ms 的过渡、cubic-bezier(0.16, 1, 0.3, 1)、一段循环视频打底。当教育与社区的首屏必须扛住一次文案改动、又不能重做设计时，它最有用。收录的提示词记录于 1826x1080，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1826x1080 的画幅一直到最小的间距档。
适合谁
- 正在写构建需求、想拿 Tailwind 和原生 JavaScript 作为讨论依据的工作室团队。
- 正在做教育或社区品牌首屏、需要在报价发出去之前把 280px 断点落到纸面上的团队。
- 在前端用 Tailwind 和原生 JavaScript 复刻这一页的开发者，希望过渡是被写明的，而不是靠猜。
包含哪些内容
- 导航不带底色. 导航条压在首屏之上，而不是把它往下挤，构图因此保住首屏的完整高度。280px 以下链接直接收起，而不是折到第二行。
- 视频是背景，不是一块面板. 需求简报把视频定在 1826x1080、循环 5.9s，每个文字元素都是对着这个画幅摆的。自动播放不可用时，1826x1080 的封面帧撑住构图，版式不会塌。
- 字阶就是样式系统. 这里字体就是那套样式系统：Helvetica, Arial 撑展示字号，整个界面共用同一套字，不需要第二个强调色来帮忙。字号档位是固定值，换字体时层级才能原样保住。
- 链接只在一个断点收起. 导航条压在首屏之上，而不是把它往下挤，构图因此保住首屏的完整高度。280px 以下链接直接收起，而不是折到第二行。字标占的位置不超过它那行字需要的宽度。
动效与交互
不靠滚动库的环境动效
背景片段在 1826x1080 下以 5.9s 循环播放，静音、行内，所以读者的注意力在文案上时，页面依然在动。不需要滚动库，因为唯一的环境动效就是这段素材本身。自动播放被拦截时有首帧封面顶上，所以动效是加分项，而不是必需品。
时长写进了需求简报
时长短而统一：300ms使用 cubic-bezier(0.16, 1, 0.3, 1)悬停态和按下态因此读起来是一套系统，而不是一堆各自为政的效果。缓动一改，时长必须跟着重新看一遍。时长是设计的一部分，不是收尾工序。
Planetary Pulse 怎么安排第一次阅读的顺序
注意力是被引导的，不是碰运气。顺序依次是导航、数据行、卡片栅格、功能列表、背景片段，每一站都按100vh 高的板块、9999px 圆角定尺寸，所以不会有东西乱序出现。教育读者先看到主张，再看到选项。
Planetary Pulse 里什么在动
套一个预设动画包上线会更快。需求简报偏偏写明了300ms 的过渡、5.9s 的循环视频、遮罩式逐行揭示，页面因此读起来是被写出来的，而不是被摆出来的。这个首屏里没有为动而动的动画。
这个首屏怎么重排
如果你的断点是为了让东西塞得下而选的，不是为了改变版式，那这一条值得读。版式在 280px 处切换、板块高度锁在 100vh、导航收进移动端菜单，而不是一串被隐藏的元素。两种状态写在同一份需求简报里。
常见问题
Planetary Pulse 有多少地方依赖 Tailwind 和原生 JavaScript？
不需要。需求简报是规格说明，不是依赖清单。它当初是按 Tailwind 和原生 JavaScript 写的，但同一套构图用你手头现有的工具都能重建。标注技术栈只是让你知道这份参考是怎么做出来的。
Planetary Pulse 的简报和我自己写的提示词是一回事吗？
页面上引用的内容全部出自收录的 26,446 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
Planetary Pulse 背后那份需求简报里到底有什么？
它是构建简报，不是感觉描述：写明 1826x1080 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
