关于这个模板
Celestial Renewal 用一份收录下来的需求简报，解决了面向健康或身心类产品做落地页时的问题。标题是“Expert beauty and holistic wellness, delivered with warmth and intention”，落地页其余部分都围着它排。配色是深蓝色 #010A17 打底、蓝色 #0A4267 承担强调色，字体用 Instrument Serif。这份参考用 React 和 Tailwind CSS 构建，但版式上的决定都独立于它写清楚了。动作被收进75ms 的过渡、cubic-bezier(0.22,1,0.36,1)、一段循环视频打底里。写作时让它开着：能迁移到你页面上的，是那份 7,343 字符的简报。
适合谁
- 给健康或身心类产品落地页换皮的成长团队，想在卖点文案改动时保住 1464x1080 的画幅。
- 正在做健康或身心类产品落地页的团队，想要的是量出来的细节（字号从 36px 到 110px、40px 间距），而不是一张可以照抄的截图。
- 产品市场的人需要落地页在背后有5.9s 的循环视频时依然好读。
包含哪些内容
- 导航是刻意做细的. 导航条上只有字标、板块链接和一个 #0A4267 按钮，尺寸按字号从 36px 到 110px、40px 间距定，永远不会长成第二个页头。链接比字标小一档，#0A4267 操作是导航条上唯一有分量的元素。链接控制在四到五个，这一行的尺寸就是照这个定的。
- 一段片段承担全部. 1464x1080 的视频在文案后面循环播放 5.9s，静音、行内，两者之间没有任何色罩层。按 1464x1080 或更宽的尺寸导出，cover 裁切就继续成立。
- 量出来的，不是估的. 尺寸是对着 1464x1080 的渲染量出来的：字号从 36px 到 110px、40px 间距、75ms 的过渡、cubic-bezier(0.22,1,0.36,1) 缓动曲线。画幅比例和尺寸记在一起，重建时连比例也一起对。
- 用带序号的文字行承担. 每一项都是一行文字加一个 #0A4267 标记，这份清单读起来因此像一份规格，而不是一组营销面板。只要文案放得下，每一行就保持一行。
动效与交互
短而互相匹配的时长
状态变化的时长写明为 75ms，所以控件上的反馈是一个设计过的值，不是浏览器默认值。值够短，重建时只要把它拖慢，一眼就能看出来。
视觉就是这块场景
视觉是运行时生成的（一块 WebGL 画布），不是加载一张静帧，所以 1464x1080 画幅少了一个素材。场景是实时的，所以调整版式尺寸不需要另做一套素材。
这套构图为什么适合健康
大多数健康页面都是因为做加法而失败：更多板块、更多渐变、更多主张。 Celestial Renewal 走的是反方向。页面直接把这句话说出来了：“Expert beauty and holistic wellness, delivered with warmth and intention”。构图停留在深蓝色 #010A17上，只有操作用蓝色 #0A4267，这已经足够显得刻意。 Celestial Renewal 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
Celestial Renewal 怎么安排第一次阅读的顺序
健康读者落到一屏内容上时，是先扫再读的。这套版式回应了这一点：导航、公告徽标、数据行、功能列表、背景片段的尺寸就是为扫读定的，字号从 36px 到 110px、40px 间距让每一站彼此分明。健康读者先看到主张，再看到选项。
这个落地页怎么重排
文案一长，先崩的是窄屏版式。这里由36px 到 110px 的 clamp吸收掉变化，字号在 36px 到 110px 之间弹性缩放、导航收进移动端菜单。宽度改变的是测量值，不是阅读路径。
常见问题
Celestial Renewal 背后的提示词到底有多长？
简报是从页面上收录下来的，共 7,343 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么这条条目还要标注 React 和 Tailwind CSS？
Celestial Renewal 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Celestial Renewal 里有多少东西是动的？
入场和状态切换都落在 75ms 这个区间内使用 cubic-bezier(0.22,1,0.36,1)，由状态变化触发而不是滚动库，也从不会拖住文案。
