## What I Built 绝大多数“舒适食品”落地页，会让你看到一碗热气腾腾的拉面特写、一组暖色调的配色方案，或许再加一个视差滚动效果。而我恰恰想做一个相反的东西：一个几乎没有任何光线的页面，你能看到的，只有你亲手打开的那一小块空间。 **2 A.M. Fridge** 是一个单页作品。页面近乎纯黑——屏幕正中央是一扇关着的冰箱门。你拉动拉手，门向两侧弹开，一道冷白的光矩形洒进厨房——而这，就是整个页面后续全部的照明模型。除了冰箱照亮的部分，页面上没有任何其他光源。 这个概念源于一种非常具体、也非常不浪漫的“舒适”：不是食物本身，而是凌晨两点站在敞开的冰箱前、其实并不饿、只是看着的那个仪式。因此，这个页面没有菜单，也没有英雄宣言——它被组织成五个“幕”：**顶层隔板、中层隔板、蔬果抽屉、冷冻室，以及一个被推到最深处、藏在角落的罐子**。你在每一层找到的每一件物品，都配了一段与之相关的极短篇小说。别人的芥末酱、放了三天还是没扔的咖喱、某个状态不错的星期熬好的一锅高汤——准备在某个糟糕的日子里用掉它。没有什么跌宕起伏的剧情，只有那些真实地住在每个人冰箱里的小小故事。所有代码与实现细节，都已收录在页面源码中。 ## 驱动全页的核心：一个 CSS 自定义属性 整个场景的技术决策，都悬挂在一个 CSS 自定义属性上： ```css @property --light-intensity { syntax: ""; inherits: true; initial-value: 0; } ``` 当你拖动拉手（或者按回车键/空格键触发——这点下面会细说），`fridge-door.ts` 会把 `--light-intensity` 从 0 更新到 1。这个数字被写入 `lightwell` 的 `radial-gradient` 光晕、门框描边的 `filter: brightness()`、每一层货架上物品的投影，以及水汽凝结层的透明度。**一个值，在一处被读取，驱动了整页的视觉状态。** 没有阴影贴图，没有照明引擎——只有一个数字，和一组简单的 CSS 消费者。 ## 五个“幕”，五段故事 - **顶层隔板**：一瓶开过封但不知道谁的芥末，附一段关于合租生活的短文。 - **中层隔板**：三天前的咖喱，保鲜膜上凝着水珠——它讲述一个关于“舍不得扔”的故事。 - **蔬果抽屉**：半根蔫掉的黄瓜和一颗孤独的苹果，写的是关于“明天一定吃蔬菜”的承诺。 - **冷冻室**：一袋手包饺子，每只的形状都不同——关于外婆的手艺。 - **深处的罐子**：一罐高汤，某天心情很好时熬的，现在只等着某个心情很差的夜晚被启封。 ## 交互与可达性 拉手本身是一个可被键盘聚焦的按钮。按 `Enter` 或 `Space` 可以开/关门，并且焦点管理已经处理妥当——门打开后焦点会自动移入冰箱内部，门关闭时焦点会回到拉手上，不会让键盘用户“迷路”在黑暗里。整个交互与视觉细节，都被压缩在一个自定义属性驱动的单页里。 --- > 一行 CSS，喂饱了整间厨房的光。凌晨两点的冰箱，只照亮你想找的那一样东西。
热门跟贴