為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 希望它不僅能作為加載狀態的指示器，還能成為用户發現的“彩蛋”，為應用增添一份獨特魅力。