星战粉用1个周末搓出倒计时网站，Vite打包只要30秒

2026年5月22日，《曼达洛人与格洛古》上映。对Felix Helleckes来说，这日子太远，干等不如动手。

他用了一个周末，搭了个纯前端倒计时站。没调用现成UI库，没买服务器，连星星背景都是手搓CSS。结果网站上线后，Netlify自动部署——从代码推送到可访问，30秒不到。

技术选型：为什么不是Next.js而是Vite

React生态里，Next.js几乎成了默认答案。但Felix选了Vite，理由很直接：快。

本地启动秒开，热更新几乎无感，打包产物干净。对于一个只需要倒计时+静态展示的项目，Next.js的服务端渲染和路由预取全是多余重量。Vite的dev server启动速度，比Create React App快一个数量级——这不是官方文档的形容词，是Felix切身体验。

部署环节更省事。Netlify对Vite的一键支持意味着：git push之后，构建、CDN分发、HTTPS证书全部自动完成。免费额度足够撑到电影下映。

CSS手搓星空：200层box-shadow的暴力美学

最花时间的设计是背景。Felix试过canvas库，轻量级的不够好看，好看的不够轻量。最后他选了纯CSS方案：用伪元素的box-shadow堆叠200个随机坐标点，加上twinkle动画交替闪烁。

代码长这样：

box-shadow: /* 200个随机坐标 */ ...;

animation: twinkle 4s infinite alternate;

没有JS运行时开销，没有额外的HTTP请求，200个"星星"纯粹是CSS渲染引擎的功劳。Felix说这种方案"lightweight and looks great"——翻译过来就是：省下来的bundle size，够塞半打表情包。

配色选了#C9A84C（帝国金）配近黑背景。没贴任何电影海报，光靠颜色就能让人联想到星战。这是Felix的观察：一个定义精准的设计系统，比堆砌素材更高效。

功能清单与反常识取舍

网站功能极简：实时倒计时（天/时/分/秒）、角色卡片（丁·贾林与格洛古）、星空背景。仅此而已。

Felix主动砍掉了社交分享按钮、预告片嵌入、甚至响应式图片集。他的判断是：倒计时站的核心体验是"等待的仪式感"，功能越多，干扰越大。格洛古的大头照旁边，不该有Facebook的蓝色图标抢戏。

角色卡片用纯CSS实现悬停效果，没上Framer Motion。动画时长控制在300ms以内，避免"炫技感"破坏星战本身的冷峻气质。

这种克制在产品经理语境里叫"场景聚焦"，在Felix的语境里叫"别让代码比原力还复杂"。

从玩具到方法论

项目开源后，Felix在GitHub备注里写了三条 takeaway：

Vite对中小型React项目的开发体验，目前无出其右；Netlify的零配置部署，把运维成本压到趋近于零；设计系统先行，比边写边调颜色省至少40%时间。

最后一条最值得玩味。很多开发者习惯"先跑通功能再美化"，结果CSS越写越脏，最后不得不重构。Felix反过来：先定死颜色变量和间距规范，再写组件。这个顺序颠倒，后期返工几乎为零。

网站地址挂在felix-helleckes.github.io，目前稳定运行。距离电影上映还有两年多，足够他再迭代十几个版本——如果他还想加功能的话。

一个周末的产出，技术栈没一样是新潮的，组合起来却异常顺滑。这让人想问：当你等一部两年后的电影时，会选择干等，还是顺手造个东西？