文章滾到底,通常會看到一張作者卡:大頭貼、一段自我介紹、偶爾塞個產品連結。功能上沒毛病,視覺上卻很像履歷邊欄——靜靜待著,等你決定要不要滑去留言區。
山姆鍋盯著那張卡看了一會兒,忽然覺得:左邊是人、右邊是字,這不就是聊天泡泡的排版嗎?差別只在於,泡泡裡的字從來不換,頭像也從來不張嘴。
於是開始動手。過程比想像中戲劇化一點。
目錄
差點做成「跟影分身真的聊天」
第一個念頭很危險:既然叫化身,不如讓讀者跟它對話。
腦內分鏡很快:點頭像 → 側欄打開 → Workers AI 上場 → 用文章當人格 → 讀者以為本人半夜還在線。聽起來很 2026,也很適合把 Cloudflare 帳單刷出新高度。
冷靜了大約兩杯咖啡的時間,結論很土:
- 公開站、不登入、誰都能打 API,等於請全世界幫你燒 token。
- 讀者會不會以為那是本人即時回覆?會。然後失望也很快。
- 這站是個人隨性發表,本來就沒有客服這條線;連留言都不保證會有人回。
所以目標縮成一句比較誠實的話:假互動,真的只是多一句碎念。
不是 LLM。是舞台燈光:頭像完整進畫面時,泡泡輪播幾句「問你一句」的台詞;講完回到自我介紹;想再聽就點頭像。真要接話,還是下面的 Giscus——至於有沒有回音,那是另一回事。
泡泡長什麼樣、怎麼動
實作落在 AuthorCard:左邊頭像可點,右邊圓角泡泡。預設仍是那段「獨立開發者……」自我介紹(含 NT² Vault ⎘ 連結),免得人家以為山姆鍋整個人被替換成行銷腳本。
行為大概是:
- 頭像完整進入視窗(
IntersectionObserver,threshold: 1)→ 自動播一輪。 - 最多 三句台詞,每句 ≤100 字,淡入淡出換句。
- 每句停留 3~5 秒隨機,免得像簡報計時器。
- 播完回到自我介紹;點頭像可重播。
- 尊重
prefers-reduced-motion:少閃、少切圖。
台詞存在文章 frontmatter 的 avatarLines。要讓人想回答,不是複誦摘要。例如問你踩過什麼坑、同不同意某個取捨,最後指一下留言區。
一百多篇舊文一次補完時,山姆鍋當然有偷懶——用腳本依標題/標籤產生問句模板。重要的文章再手寫;這篇不是手寫的。你現在如果剛好看到頭像在張嘴,那大概就是它在念這三句。
「在說話」這件事,CSS 先被否決
中間還走過一條岔路:用 CSS 讓頭像上下晃、側傾、點頭,假裝有情緒。結果是——你幾乎看不見。靜態插畫被平移 3px,比較像網頁抖了一下,不像人在講話。
後來改成比較老派、但比較誠實的做法:多一張張嘴的頭像圖,換句淡入時,閉嘴/張嘴切換大約 一秒,然後停住。句子繼續待在泡泡裡到停留結束;嘴不必全程巴拉巴拉,否則像壞掉的對嘴娃娃。
沒有真換臉骨骼、沒有唇形對齊音訊。就是兩張圖在眨眼間交換。影分身科技如果還在,大概會把這叫「MVP 嘴型」。
刻意不做的事
順便列一下,免得下次自己又手癢:
- 先不接 LLM:成本、信任、維護,三輸。但未來誰知道呢?
- 不把作者卡變成迷你產品頁:NT² 的說明在 nt2.me ⎘,這裡只提一句當自我介紹的一部分。
- 不讓台詞每頁都一樣:一樣的話,讀者滑三篇就免疫了;而且也對不起「客製」兩個字。
- 不靠 CSS 截斷長句:超過字數就改寫,泡泡要長就長,內容要看得見。
靜態站能做的互動,常常就長這樣:一點觀察者、一點計時器、一點內容策略。炫的是錯覺,留下的是行為設計。
小結
作者卡還是作者卡。它不會替你回 Issue,也不會半夜跟你辯架構。它只是在你滑到文末時,用一種有點欠揍的方式提醒:留言區就在下面,丟一句也行。
如果你覺得這套太吵、太假、或剛好覺得有趣——下面開一則隨便。頭像那邊的碎念,聽完可以當沒聽到;留言區也不保證有人回——這裡本來就只是個人隨性發表的地方。