← 回 Log

首頁換成一台會打字的 CRT

0t2.me 首頁從 terminal 打字畫面換成一張線稿老電腦:CRT 重播舊的登入畫面,鍵盤可以點也可以直接打字;全站同時改成單一霧灰底、細線、沒有陰影的風格。

首頁改版了。原本是一個 terminal 在打字,現在換成一張線稿老電腦。

CRT 開機時會先亮一條線再展開,重播舊首頁那段畫面:login: guest、$ init、幾行檢查,最後停在 to be continued...。之後它會自己輪流跑幾組指令,像 sudo make art、brew coffee、fortune,機器也會回話。

前面的鍵盤是真的可以用的。可以直接點鍵帽,也可以用實體鍵盤打字,打 help 會告訴你還能試什麼。按下去的鍵會亮,鍵盤線上會有一道光跑向主機;點滑鼠會直接執行下一個指令。

電腦旁邊是一個書桌角落:軟碟、冒煙的馬克杯、會輕輕擺動的植物,後面是書桌和書架。寬螢幕時小物放兩側,手機則改成上下排列,讓畫面在直的螢幕上也填得滿。房間用比較淡的線畫,偶爾有一層書像波浪一樣晃一下,空氣裡有一點灰塵在飄,都刻意做得很安靜。

全站也一起換了風格:

  • 只有一個霧灰底色,拿掉深淺色切換
  • 框線都是 1px,不用陰影
  • 字體換成 Chiron GoRound TC
  • 只留一個朱橘強調色,只給「正在動的東西」

畫法用的是 hairline 線稿引擎(等角、圓角實體只畫輪廓和一條摺線),打光照 iso-glow 的規則。整個首頁動畫兩支腳本加起來 gzip 後約 25 KB,只在首頁載入。

過程中先做過一版「鍵盤+壓克力板,字會亮起來」,後來才改成 CRT;兩版的原型都留在 repo 的 design/home-hero/,之後要調顏色、換指令組都從那裡開始。