关于这个模板
把 Brightly 当作首屏规格书来读：这些数值在页面动手之前就先写下来了。页面自己的标题是“Manage projects effortlessly with smart tools, stay on track, meet deadlines, and keep your team productive”，整个构图就是围绕这串字搭的。整页都建立在黑色 #050505 打底、亮橙色 #F97316 承担强调色之上。交付形式是 React 和 Tailwind CSS，收录于 2046x1400，所以画幅在任何一行代码写下去之前就已经定好。动效只限于3.5s 的过渡、一段循环视频打底。当创意机构与工作室的首屏必须扛住一次文案改动、又不能重做设计时，它最有用。
适合谁
- 这一版首屏服务的是需要一屏证据、证明创意机构的文案能扛住 13.7s 的循环视频的创始人。
- 给正在做创意机构或工作室首屏、背后还没有设计系统的独立创始人用。
- 用提示词给首屏提需求的人，会把这份 2,298 字符的提示词当作起点。
包含哪些内容
- 导航条落在页面栅格上. 这一行的对比只花在一个地方：#F97316 操作；字标和链接都退回正文色。到了平板断点以下，改由移动端浮层接管。链接比字标小一档，#F97316 操作是导航条上唯一有分量的元素。
- 没有一样是继承来的. 版式里没有一样交给感觉：需求简报写明了 24px 间距、3.5s 的过渡，构建必须落回这些值。落回这些数值的重建不用再调就长得像参考。
- 要片段，不要插画. 2046x1400 的视频在文案后面循环播放 13.7s，静音、行内，两者之间没有任何色罩层。按 2046x1400 或更宽的尺寸导出，cover 裁切就继续成立。
- 量出来的，不是估的. 版式里没有一样交给感觉：需求简报写明了 24px 间距、3.5s 的过渡，构建必须落回这些值。落回这些数值的重建不用再调就长得像参考。数值才是设计，其余只是摆放。
动效与交互
是循环，不是时间轴
背景片段在 2046x1400 下以 13.7s 循环播放，静音、行内，所以读者的注意力在文案上时，页面依然在动。不需要滚动库，因为唯一的环境动效就是这段素材本身。自动播放被拦截时有首帧封面顶上，所以动效是加分项，而不是必需品。
入场就是签名动作
整套动作就是逐词入场：页面上没有别的元素跟着一起表演。实现上是几个过渡，没有引入动画库。这份参考在 2046x1400 下收录。
这个首屏怎么重排
文案一长，先崩的是窄屏版式。这里由100px 到 24px 的 clamp吸收掉变化，导航收进移动端菜单。随视口改变的是尺度，不是顺序。
这个首屏背后的时序
需求简报把每一次过渡都绑定在一个明确的数值上（3.5s 的过渡、13.7s 的循环视频、逐词出现的标题），这套页面里没有哪个动作是随口定下的。正因为如此，它不会读起来像一个被随手套上动画预设的模板。这个首屏里没有为动而动的动画。
这个首屏在论证什么
一个现成的首屏和这个首屏用的是同一批零件。区别在于这里按导航、数据行、背景片段排序、用24px 间距、3.5s 的过渡去量，所以这一屏读起来是一条序列，而不是一个容器。它给创意机构读者的是一条通向主张的最短诚实路径。
常见问题
Brightly 背后的提示词到底有多长？
它是构建简报，不是感觉描述：写明 2046x1400 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
能用别的技术栈重建 Brightly 的首屏吗？
Brightly 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Brightly 的设计是从哪来的？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 2046x1400 下收录。
