製作說明
這個網站是怎麼做出來的。每個畫面都以 BIG BLUE 設計語言手工打造——四種顏色、三套字體、一個非常大聲的聲音。
沒有模板、沒有主題、沒有頁面編輯器。這個網站由 Teyra 自己設計、自己打造——就像我們做其他所有東西一樣:刻意,而且有點偏執。
標題後方流動的霧氣不是影片,而是在 WebGL 裡手工調校的流體模擬——一段即時運算的 fragment shader,會隨著你的游標輕輕推動。
(01) 技術構成
Next.js 16 + React 19
App Router · Server Components · 嚴格模式 TypeScript
Tailwind CSS v4 + framer-motion
utility 樣式 · 彈簧般的動態
手工調校的 WebGL
流體背景——純 shader,沒有 3D 函式庫
next-intl
網站上的每一句話都有兩個版本——English 與中文
自製雙語 CMS
一份 JSON 文件,存放在 Render 的持久磁碟上
Render + Cloudflare
push 即部署 · 邊緣快取
(02) 字體
Archivo
標題字——那些大聲喊叫的大寫字母
Fraunces
襯線字——安靜的對位聲部
Noto Sans TC
撐起網站中文的那一面
(03) 調色盤
BLUE#4374ba
SKY#479ed7
INK#182640
PAPER#f6f3ec
四種顏色。就這些。
(04) 製作小事實
- 兩種語言、一份內容文件——CMS 把每句話的英文與中文並排存放。
- 背景的流體是在你的 GPU 上逐幀運算的,只為你而流。
- 用 git push 部署。你能讀到這行字,表示建置成功了。
- 全站嚴格 TypeScript——讓編譯器先抱怨,使用者就不必了。
- 大寫字母使用得很節制。大概吧。