書庫「皮膚」設計：書脊書架(bookshelf spine)與暖色 editorial

TL;DR

替 BoboBlog /readingList 探索過的兩種視覺手法,最後沒上站(暖 cream / dark midnight 跟全站 info-track 冷藍配色打架,單頁 mood skin 會跟全站 chrome 衝突)。但手法本身值得留底:① dark「書脊書架」用封面圖當書脊材質 + 燙金裝幀 + hover 抽出翻封面;② warm 紙感 editorial。網頁端最後只留「封面 grid 排版」回站色。

背景

想法是讓 /readingList 可切換「皮膚」(warm 閱讀札記 / dark Midnight 書店 / data 數據),同一份書資料套不同外觀。用 Playwright 渲染逐版驗證過,視覺都做出來了,但跟站上配色不搭 → 收掉,改回站色的簡單版(最近讀完 + 封面 grid)。以下記手法。

手法一:Dark 書脊書架(最有價值)

關鍵痛點:我們只有封面圖、沒有書脊圖。解法 —— 書脊用「生成」的:

• 書脊底 = 該書封面當材質:background-image 放封面 + 模糊+壓暗的 filter 層(filter: blur(8px) brightness(.6) saturate(1.3); transform: scale(1.25))→ 書脊帶有這本書真實的色彩紋理,不是死板單色。
• 燙金裝幀(furniture):左側書邊金線、上下橫帶、letterpress 內陰影。
• 直排書名:writing-mode: vertical-rl。
• 書脊粗細不一:用 slug 的 deterministic hash 算 34–48px,SSR/CSR 一致(避免 hydration mismatch),像真書架。
• hover → 抽出翻封面:書脊 flex-basis 40px → 140px 過渡 + 上抬,真實清晰封面(next/image)疊在書脊上 opacity 淡入,旁書讓位 → 「把書抽出來、翻到封面」的揭曉感。
• 木質層板(gradient + shadow)墊在每排書下;氛圍光(模糊的紫/琥珀 radial blob,mix-blend-mode: screen)。
• 書依類別分層(shelf）。

.spine .tex { position:absolute; inset:0; background-size:cover; background-position:center;
  filter: blur(8px) brightness(.6) saturate(1.3); transform: scale(1.25); }
.book { flex: 0 0 var(--w, 40px); transition: flex-basis .45s cubic-bezier(.2,.85,.25,1), transform .45s; }
.book:hover { flex-basis: 142px; transform: translateY(-42px) rotateY(-4deg) scale(1.03); }
.book:hover .spine { opacity: 0; }   .book:hover .cover { opacity: 1; }
.spine span { writing-mode: vertical-rl; }   /* 直排書名 */

手法二:Warm 紙感 editorial(閱讀札記)

• 奶油紙 palette + SVG fractal-noise grain overlay(低透明度)做紙紋。
• 襯線標題(Fraunces / Noto Serif TC)—— ⚠️ 要真的載襯線 webfont 才有個性,只靠系統 fallback 質感會掉。
• 封面 grid 帶「實體相片」陰影:box-shadow: 0 12px 20px -12px rgba(90,55,25,.45), 1px 1px 0 #fff(暖陰影 + 1px 白邊),hover 上抬 + 微旋轉。
• 左邊引言卡給「靈魂」。

可切換皮膚的架構

• 切換器:localStorage 持久化(usePersistedState 必須 SSR-safe:首次 render 回 initial,useEffect 才還原 localStorage,否則 hydration mismatch)。
• 一份共用資料 + 共用「找得到」層(搜尋 / 類別 / 排序),各皮膚只換外觀。
• 每個皮膚要自己擁有整頁:全幅底色 + 把 header / 切換器整合進皮膚自己的配色。最忌站上通用 hero / tab chrome 疊在皮膚上面 → 拼貼、超醜(這是第一版失敗主因)。

踩過的坑(通用)

• WebGL / R3F 把封面當材質要 CORS-enabled 圖;一般 <img> / next/image 沒這限制 → 想用真實封面又不想搞 CORS,CSS-3D / 2.5D 比 WebGL 實際。
• 3D 真實書本(Three.js)= ~150kb+ dep + GPU/電 + 維護成本;純 CSS 透視的 2.5D 拿到 70% 的 wow、10% 的成本。
• scroll-driven reveal() 的 @keyframes 要留在 module 內(css-loader 會 scope animation-name,全域 keyframe 對不上會默默失效)。
• list → 詳情頁可用 View Transitions 共享元素 morph(per-slug view-transition-name)。

為什麼 BoboBlog 沒採用

暖 cream / dark midnight 是強烈的單頁 mood,跟全站 info-track 冷藍灰 editorial 的 navbar / footer / chrome 打架 —— per-page skin 對抗 global theme。最後網頁端只保留封面 grid 排版(回站色)+「最近讀完」。手法存這,哪天做獨立的「書房」站或 side project 可以直接撿來用。