WARM UP 是一档虚构的复古电视节目，面向设计新人。它的设定是：创意技能就像肌肉，所以每个教程都是一盘健身 VHS 录像带。我把网站做成概念，展示一个有趣的、广播电视风格的网站，由一个隐喻及其动效来承载教学。

网站从第一秒起就要像电视——开机画面、频道和雪花噪点——同时又要能当教程用：访客挑一盘录像带、跟着练习，还可以打进节目热线。每一个效果都要服务于这个隐喻，并保证文字清晰可读。

七个页面：首页、录像带、演播室、热线、隐私、条款和 404。共有 4 盘 VHS 录像带——Idea Stretch、Portfolio Pump、Critique Cardio 和 Pitch Cool-Down——每盘包含 5 个动作的练习，首页上有一台 5 个频道的电视。

首页以 VHS 开机画面开场：PLAY、磁带计数器和跟踪调节。随后是一台可用屏幕箭头或键盘切换的五频道电视，带雪花噪点和下方字幕条、立体复古标题以及滚动字幕。录像带以 CSS 构建的 3D VHS 封套呈现，会随滚动旋转，悬停时播放预览；录像带页面有电视框内的视频、五个动作及次数、教练提示、常见伤病、课后作业和下一盘录像带。

屏幕上有扫描线、实时 canvas 雪花噪点、滚动的跟踪条纹、色差效果的屏显文字和画面抖动；文字以弹性回弹的方式跳出，切换页面时画面收缩成雪花并显示 FF 或 REW。网站为纯 HTML、CSS 和 JavaScript，使用 GSAP、ScrollTrigger 和 Lenis；热线表单仅作演示，不发送任何内容。

这个概念由 7 个已完成的英文页面组成。2026 年 9 月 22 日，我检查了其中在 Chrome 中渲染的 6 个（不含 404）：6 个页面标题全部唯一且只有一个 H1，声明了语言，布局在 390 px 下无横向滚动，没有失效的内部链接。

Lighthouse 测量了首页。移动端：性能 88、无障碍 95、最佳实践 77、SEO 100，LCP 2.7 秒、CLS 0.048、TBT 0 毫秒，21 个请求共 9.8 MB。桌面端：性能 73，LCP 0.9 秒、TBT 0 毫秒，但 CLS 为 0.577，原因是字体和视频加载时频道与标题区块发生位移；由于视频，桌面端首页为 13.4 MB。