作者真的開始碎念了(還好不是 AI)

發布: 約 4 分鐘

文章滾到底,通常會看到一張作者卡:大頭貼、一段自我介紹、偶爾塞個產品連結。功能上沒毛病,視覺上卻很像履歷邊欄——靜靜待著,等你決定要不要滑去留言區。

山姆鍋盯著那張卡看了一會兒,忽然覺得:左邊是人、右邊是字,這不就是聊天泡泡的排版嗎?差別只在於,泡泡裡的字從來不換,頭像也從來不張嘴。

於是開始動手。過程比想像中戲劇化一點。

目錄

展開目錄

差點做成「跟影分身真的聊天」

第一個念頭很危險:既然叫化身,不如讓讀者跟它對話。

腦內分鏡很快:點頭像 → 側欄打開 → Workers AI 上場 → 用文章當人格 → 讀者以為本人半夜還在線。聽起來很 2026,也很適合把 Cloudflare 帳單刷出新高度。

冷靜了大約兩杯咖啡的時間,結論很土:

  • 公開站、不登入、誰都能打 API,等於請全世界幫你燒 token。
  • 讀者會不會以為那是本人即時回覆?會。然後失望也很快。
  • 這站是個人隨性發表,本來就沒有客服這條線;連留言都不保證會有人回。

所以目標縮成一句比較誠實的話:假互動,真的只是多一句碎念。

不是 LLM。是舞台燈光:頭像完整進畫面時,泡泡輪播幾句「問你一句」的台詞;講完回到自我介紹;想再聽就點頭像。真要接話,還是下面的 Giscus——至於有沒有回音,那是另一回事。

泡泡長什麼樣、怎麼動

實作落在 AuthorCard:左邊頭像可點,右邊圓角泡泡。預設仍是那段「獨立開發者……」自我介紹(含 NT² Vault 連結),免得人家以為山姆鍋整個人被替換成行銷腳本。

行為大概是:

  1. 頭像完整進入視窗IntersectionObserverthreshold: 1)→ 自動播一輪。
  2. 最多 三句台詞,每句 ≤100 字,淡入淡出換句。
  3. 每句停留 3~5 秒隨機,免得像簡報計時器。
  4. 播完回到自我介紹;點頭像可重播。
  5. 尊重 prefers-reduced-motion:少閃、少切圖。

台詞存在文章 frontmatter 的 avatarLines。要讓人想回答,不是複誦摘要。例如問你踩過什麼坑、同不同意某個取捨,最後指一下留言區。

一百多篇舊文一次補完時,山姆鍋當然有偷懶——用腳本依標題/標籤產生問句模板。重要的文章再手寫;這篇不是手寫的。你現在如果剛好看到頭像在張嘴,那大概就是它在念這三句。

「在說話」這件事,CSS 先被否決

中間還走過一條岔路:用 CSS 讓頭像上下晃、側傾、點頭,假裝有情緒。結果是——你幾乎看不見。靜態插畫被平移 3px,比較像網頁抖了一下,不像人在講話。

後來改成比較老派、但比較誠實的做法:多一張張嘴的頭像圖,換句淡入時,閉嘴/張嘴切換大約 一秒,然後停住。句子繼續待在泡泡裡到停留結束;嘴不必全程巴拉巴拉,否則像壞掉的對嘴娃娃。

沒有真換臉骨骼、沒有唇形對齊音訊。就是兩張圖在眨眼間交換。影分身科技如果還在,大概會把這叫「MVP 嘴型」。

刻意不做的事

順便列一下,免得下次自己又手癢:

  • 先不接 LLM:成本、信任、維護,三輸。但未來誰知道呢?
  • 不把作者卡變成迷你產品頁:NT² 的說明在 nt2.me,這裡只提一句當自我介紹的一部分。
  • 不讓台詞每頁都一樣:一樣的話,讀者滑三篇就免疫了;而且也對不起「客製」兩個字。
  • 不靠 CSS 截斷長句:超過字數就改寫,泡泡要長就長,內容要看得見。

靜態站能做的互動,常常就長這樣:一點觀察者、一點計時器、一點內容策略。炫的是錯覺,留下的是行為設計。

小結

作者卡還是作者卡。它不會替你回 Issue,也不會半夜跟你辯架構。它只是在你滑到文末時,用一種有點欠揍的方式提醒:留言區就在下面,丟一句也行。

如果你覺得這套太吵、太假、或剛好覺得有趣——下面開一則隨便。頭像那邊的碎念,聽完可以當沒聽到;留言區也不保證有人回——這裡本來就只是個人隨性發表的地方。

Sampot (山姆鍋)

獨立軟體開發者,專長分散式系統、Web 應用與雲端服務架構。目前一人開發NT² Vault。工作之餘關注開源軟體的發展與應用,偶爾在這裡碎念與分享。