MÅTTA 地墊選品

MÅTTA 是手工簇絨地墊的選品品牌，商品從浴室小墊到 200 × 300 公分的客廳主毯都有。網站要同時扮演型錄、規格書與詢問入口。

地墊的價值有一半在照片上看不出來——絨高、克重、止滑底、可不可以機洗。款式一多，訪客又容易在圖片牆裡迷路。網站需要同時解決「怎麼挑」與「憑什麼值這個價」。

把整站當成一個持續廣播的訊號站：每一款圖案是一則訊號，每一段資訊是一次接收。這個比喻讓工業儀表般的介面語言（座標、時鐘、REC 計時、狀態指示）有了正當性，也讓規格數字自然成為畫面的一部分而不是附註。

• 橄欖綠與螢光黃的雙色系統，其餘全部留給商品照
• 等寬字承載所有數據，中文黑體只負責敘事
• 首頁標題以亂碼打字揭露，像訊號正在解碼

以滿版訊號面板開場，控制列把 17 / 17、12 mm、2400 GSM 這些關鍵數字直接攤在首屏。往下每個區段各自負責一件事，避免資訊在同一畫面裡互相打架。

• 產品索引：五類篩選 + 點選展開規格燈箱，支援鍵盤左右切換
• 工法規格：絨面、紗線、膠層、止滑底四層由上往下拆解
• 製作流程：編碼 → 發送 → 接收三個節點，各自標示工期
• 尺寸模擬：五種規格即時換算比例，並標註適合的擺放位置

整站是一份 HTML、一份 CSS、一份原生 JavaScript，沒有任何框架或建置流程。商品索引由資料陣列渲染，篩選、燈箱、尺寸換算與 FAQ 展開都是原生事件處理，捲動顯現交給 IntersectionObserver。

• 所有動態效果都尊重 prefers-reduced-motion，關掉後內容照樣完整
• 燈箱鎖定焦點並在關閉後歸還，Esc 與左右鍵皆可操作
• 每張商品圖都有描述圖案與情境的替代文字

下方選讀四個最能代表這個站的區段：產品索引、工法規格、製作流程與尺寸模擬。它們合起來就是這個案子的核心——把工藝細節翻譯成訪客願意讀完的畫面。