关于这个模板
把 Portfolio Cosmic 当作作品集规格书来读：这些数值在页面动手之前就先写下来了。它以“Designing seamless digital interactions by focusing on the unique nuances which bring systems to life”开场，给这句话整个版心，而不是把它缩进一张卡片里。配色控制在黑色 #000000 打底、白色 #D1DAD8 给文字、蓝色 #4E85BF 承担强调色之内，字体用 Inter。交付形式是 React 和 Tailwind CSS，收录于 800x562，所以画幅在任何一行代码写下去之前就已经定好。动效是2700ms 的过渡，克制到文案依然是主角。当你要做面向3D、游戏或娱乐品牌的作品集、想要一个成品构图而不是一个起点时，就拿它当参照。
适合谁
- 如果动效必须砍掉，这版作品集照样读得通，靠固定 13px 的标题字号、300vh 高的板块撑起层级。
- 给正在做3D、游戏或娱乐品牌作品集、背后还没有设计系统的独立创始人用。
- 用提示词给作品集提需求的人，会把这份 8,253 字符的提示词当作起点。
包含哪些内容
- 导航收在一行. 这一行的对比只花在一个地方：#4E85BF 操作；字标和链接都退回正文色。链接比字标小一档，#4E85BF 操作是导航条上唯一有分量的元素。
- 尺寸钉在需求简报里. 这份清单很短（固定 13px 的标题字号、300vh 高的板块、13px 间距、2700ms 的过渡），整套系统因此能靠手一个个核过去。清单短到审核的人能一个元素一个元素地核。先量，再调。
- 要面板，不要段落. 栅格就是结构：面板同样大小，用 Inter 排，排得让视线横向移动，而不是向下。每块面板把一个观点和一个图标配在一起，扫读路径就一直保持横向。宁可删一块面板，也别缩字号。
- 构图即内容. 整套构图装在一屏里，以 React 和 Tailwind CSS 交付，文案、素材和控件都在需求简报里点明了。页面在 800x562 下就是一套完整构图，所以文案变了它依然立得住。画幅保留，换掉主题。
动效与交互
短而写明的时长
动画预算小而明确：2700ms只用在状态变化上，不用在入场动画上。每一次状态变化都写明了数值，所以永远不会用到浏览器默认值。状态变化要快，不要滚动时间轴。
永不停下的那条长条
这条横向长条是标题之外最响的元素：持续运动，当前项用 #4E85BF，而且从不要求读者交互。当前项用 #4E85BF 标记，而不是靠改字号。
把这个作品集变成你自己的
先改文案和素材，再改颜色，最后才动版式。800x562 的画幅和 Inter 的字阶是撑住整页的东西，所以要在它们周围做替换，而不是从它们中间穿过去。别动的是画幅和字阶。
Portfolio Cosmic 里什么在动
动效只限于 2700ms 的过渡、视差层、吸顶元素；它只在进入时跑一次，随后就让到一边，对于一个必须保持可读的作品集来说，这才是合适的动效预算。这个作品集里没有为动而动的动画。
这份3D需求简报为什么站得住
Portfolio Cosmic 成立，是因为它的层级是被决定出来的，而不是装饰出来的。需求简报定下了固定 13px 的标题字号、300vh 高的板块、13px 间距、2700ms 的过渡，所以新文案是落进画幅里，而不是把画幅重新打开。它给3D读者的是一条通向主张的最短诚实路径。
常见问题
Portfolio Cosmic 背后那份需求简报里到底有什么？
它是构建简报，不是感觉描述：写明 800x562 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
能用别的技术栈重建 Portfolio Cosmic 的作品集吗？
Portfolio Cosmic 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
在客户项目里该怎么处理 Portfolio Cosmic 的素材？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 800x562 下收录。
