关于这个模板
Vinyl 展示了为生活方式品牌做落地页的一种做法，并把生成它的说明一起公开。颜色只用了天蓝色 #DBE6EE 打底、#0B0B0C 给文字，正文排的是 Instrument Serif。交付就是一个自包含的 HTML 文件：一个页面，没有插件，你和设计之间不隔任何构建工具链。这个页面的动效控制在1.2s 的过渡、cubic-bezier(.22,1.36,1)、一段循环视频打底。对于需要在第一屏就显得刻意的生活方式品牌落地页，它是一份合适的参考。
适合谁
- 把一个自包含的 HTML 文件连同 1920x1420 的裁切一起交给工程师，让他们自己重建。
- 正在做生活方式品牌落地页、需要在报价发出去之前把一个自包含的 HTML 文件落到纸面上的团队。
- 这个落地页面向的是已经熟悉一个自包含的 HTML 文件、只差把 380px 断点写下来的团队。
包含哪些内容
- 导航是刻意做细的. 字标占住左边缘，链接从它右边排开，全部用 Instrument Serif 排，所以这条导航条属于下面的页面，而不是另一套系统。标签短到能在 380px 下一行放下，当前项用字重标出，而不是加一个胶囊底。
- 封面帧也算数. 一段静音循环视频按 1920x1420、6.6s 铺满画幅，以 cover 裁切，文案叠在它上面。需求简报不允许在视频上压叠加层，所以画面不会被压灰。自动播放不可用时，1920x1420 的封面帧撑住构图，版式不会塌。
- 字阶是钳制的，不是分档跳的. 字阶顶部是流体的（24px 到 22px 的 clamp），其余档位固定，视口收窄时画幅依然保持成构图。视口变窄时，字体的角色不变，只是尺寸变。在手机上检查首屏。
- 链接在前，操作在后. 字标占住左边缘，链接从它右边排开，全部用 Instrument Serif 排，所以这条导航条属于下面的页面，而不是另一套系统。标签短到能在 380px 下一行放下，当前项用字重标出，而不是加一个胶囊底。把这一行控制在单行。
动效与交互
到达顺序才是关键
整套动作就是遮罩式逐行揭示：页面上没有别的元素跟着一起表演。动画只在加载时跑一次，不跟着滚动重播，所以你读的时候页面不会反复表演。这份参考在 1920x1420 下收录。
状态变化也有时长
过渡在需求简报里写明为 1.2s缓动是 cubic-bezier(.22,1.36,1)，控件上的时长就以这个值为准。缓动和时长写在一起（1.2s），复刻时没法悄悄换成另一种手感。不要把浏览器默认值发上线。
把 Vinyl 当规格书读
这一页里的数字比看上去多。复刻必须保住的是100vh 高的板块、22px 间距、1.2s 的过渡、cubic-bezier(.22,1.36,1) 缓动曲线、380px 断点，其余的都可以动。这个落地页里没有任何一处依赖默认值。
Vinyl 里什么在动
预设动画库能给你比这多得多的动作。这份简报要的更少：1.2s 的过渡、6.6s 的循环视频、遮罩式逐行揭示，上面不加任何装饰性动画。这个落地页里没有为动而动的动画。
把这个落地页变成你自己的
主题给你的是一堆组件，这份需求简报给你的是一套构图：100vh 高的板块、22px 间距、1.2s 的过渡、cubic-bezier(.22,1.36,1) 缓动曲线和一个素材画幅，题材留给你自己。换一个品牌，整套画幅都能接着用。
常见问题
Vinyl 背后的提示词到底有多长？
简报是从页面上收录下来的，共 18,878 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
重建 Vinyl 必须用一个自包含的 HTML 文件吗？
Vinyl 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Vinyl 的简报和我自己写的提示词是一回事吗？
页面上引用的内容全部出自收录的 18,878 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
