用100+ SVG帧把熬夜做成预加载体验

是什么 这是一条关于个人作品集首屏预加载器的案例分享。作者明确说明它不是后台视频，而是由100多个SVG帧组成的逐帧动画；叙事主题是把自己的糟糕睡眠周期转成可见的等待过程。

核心设计 画面先以极简白底和居中构图建立注意力：电池从有电到耗尽，人物从专注工作到趴在电脑前，随后白色加载容器过渡到作品集首屏。电量是可读的进度隐喻，人物姿态则承担情绪表达，让技术等待具有个人品牌记忆点。最终页面延续留白、蓝紫背景、圆角容器和插画与项目图的视觉语言，并以“Featured by Figma”等信息完成信任线索。

关键洞察 价值不在“用了多少帧”，而在于把等待、状态变化和自我介绍串成一个短叙事。SVG逐帧方案也给创作者更细的时间、形状和响应控制，适合需要独特首屏的作品集或品牌站。

边界与风险 100多个SVG可能带来请求数量、解析、内存和移动端首屏性能压力；预加载器本身也可能延迟用户接触内容。落地时应控制总资源体积，提供真实加载兜底、跳过或快速进入机制，并支持prefers-reduced-motion、键盘可用性和屏幕阅读器语义。它更像高辨识度的品牌化体验，不应成为所有网站的通用加载模板。