為AI初創公司構建獨特的盲文載入元件

德國軟體工程師 Dominik Koch 最近在其 AI 初創公司 Notra 的聊天介面開發中，打造了一款獨特的盲文載入動畫元件。相較於傳統的旋轉載入動畫，這個元件能夠將公司名稱或任意文本轉換為盲文字元，並支援波浪（Wave）、打字機（Typewriter）、閃爍（Shimmer）和脈衝（Pulse）四種動畫風格，既增加了視覺趣味，也融入了品牌元素。

Koch 在個人部落格中分享了這一創作歷程。他解釋選擇盲文的原因：現實世界中盲文幫助視障人士閱讀，而由點陣構成的盲文字元天然適合用作載入動畫，類似於命令列介面常見的旋轉效果。但單純的旋轉過於單調，於是他想到了將公司名稱“notra”轉換為盲文，讓動畫既美觀又有意義。

該元件現已開源，可透過 shadcn CLI 快速安裝。命令為 pnpm dlx shadcn@latest add @dominik-ui/braille-loader，安裝後會生成兩個檔案：UI 元件 braille-loader.tsx 和工具函式 text-to-braille.ts。使用非常簡便，只需匯入元件並傳入文本，即可自動轉換為盲文顯示。元件還接受 animation 屬性以切換動畫風格，以及 className 進行樣式定製。

在無障礙方面，Koch 特別指出，盲文字元如果直接暴露給螢幕閱讀器，會被逐字元讀出 Unicode 名稱，造成干擾。因此元件預設對盲文部分設定 aria-hidden="true"，僅在外層容器提供“載入中”之類的可訪問標籤，確保視障使用者也能清晰感知載入狀態。

這個專案最初只是 Notra 聊天介面中的一個小功能，但最終演變為一個有趣且實用的可複用元件。Koch 希望它不僅能作為載入狀態的指示器，還能成為使用者發現的“彩蛋”，為應用增添一份獨特魅力。