厨房材质预览器

递给别人一块 100mm 的样板砖，让他脑补出整间厨房，其实要求挺高。纹理放大到地面尺度是另一回事，墙面颜色在灯光下会变，而且两种材质还得彼此搭得住。人们真正想看的是房间本身穿上这个材质的样子。这个小东西就是对这件事的一个回答：9 种材质，20 种组合，每种只要点一下。

20 种组合本可以做成 20 张 4K 渲染图 —— 那意味着几小时的渲染时间和几百 MB 的体积。这里的做法是：厨房在 SketchUp 里建一次模、渲一张 3840×2160 的底图，再叠 9 张透明 PNG 覆盖层，每一张都在 Photoshop 里抠好，材质本身就已经带着房间的透视、阴影和光线走向。换材质不过是换一张图片的地址：地面层和墙面层各自叠在底图上，两个选择完全独立，任意搭配都不需要多做一张图。9 张图片顶下了 20 张渲染图的活。

界面被重做成它本来就该是的那份文件：一张材料研究图纸。顶部的标题栏写着材质总数和组合总数。每块样品都标着行业通用的编号 —— FL 是地面，WL 是墙面 —— 同样的编号又出现在图纸最下方的材料表里，你看到的和你会写进清单的是同一套东西。编号用等宽字体，标题用宽体无衬线，通篇暖调近黑色，颜色全部留给材质本身。

全部 18 张素材 —— 9 张样品图和 9 张图层 —— 在首屏就预加载完毕，所以第一次点击和第十次一样快，也不会出现材质画到一半的情况。切换时有一道扫光动画盖住换图的瞬间，让变化看起来是有意为之，而不是闪了一下。选择会写进 localStorage，下次回来自动恢复 —— 因为人总是要回头对比的。每块样品都是真正可聚焦的元素，带 aria-pressed 状态并响应 Enter / Space；图片加载失败会把那块样品标为不可用，而不是留一个空格子；开启「减少动态效果」时动画自动关闭。样式表和脚本的地址都带版本号，改版永远不会被旧缓存盖住。

index.html、styles.css、script.js —— 三个文件加起来约 1,100 行，没有框架，没有打包器，没有包管理器。材质清单就是脚本顶部的一个对象，加一种材质只需要放两张图、加一条记录，标题栏里的数字和样品盘会自己跟上。布局用 CSS Grid，在 1080、760、440 三个断点上从三段式图纸收成单列竖排。部署到 Cloudflare 就是一堆静态文件 —— 这正是重点：这样一个页面，十年后应该照样打得开。