廚房材質預覽器

遞給別人一塊 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 就是一堆靜態檔案 —— 這正是重點：這樣一個頁面，十年後應該照樣打得開。