AIスタートアップのためのユニークな点字ローダーを構築

ドイツ在住のソフトウェアエンジニア Dominik Koch は、自身のAIスタートアップ Notra のAIチャットインターフェースを構築する過程で、従来の回転するローディングアニメーションに代わる、独自の点字ローダーコンポーネントを開発しました。このコンポーネントは、会社名や任意のテキストを点字に変換し、Wave（波）、Typewriter（タイプライター）、Shimmer（きらめき）、Pulse（パルス）の4種類のアニメーションスタイルを提供します。視覚的な面白さだけでなく、ブランドの個性も演出できます。

Koch は点字を選んだ理由について、点字が現実世界で視覚障害者の読書を助けるものであること、そしてドットのパターンがCLIでよく使われるスピナーに似ており、ローディング表示に適していると説明しています。単なるスピナーでは退屈だと考え、会社名「notra」を点字に変換して表示するアイデアを思いつきました。

このコンポーネントはオープンソースとして公開されており、shadcn CLI を使って pnpm dlx shadcn@latest add @dominik-ui/braille-loader で簡単にインストールできます。インストール後は、UIコンポーネント braille-loader.tsx とユーティリティ text-to-braille.ts がプロジェクトに追加されます。使用時にはコンポーネントをインポートし、テキストを渡すだけで自動的に点字に変換されます。animation プロパティでアニメーションの種類を変更したり、className でスタイルをカスタマイズすることも可能です。

アクセシビリティ面では、Koch は点字文字をそのまま画面読み上げソフトに読ませると、文字の名前が連呼されてノイズになることを指摘しています。そのため、コンポーネントは点字部分に aria-hidden="true" を設定し、外側の要素に「Loading」などのアクセシブルなラベルを付けることで、スクリーンリーダーユーザーにも適切な状態を伝えるように設計されています。

このプロジェクトは当初、Notra のAIチャットにおける小さなローディングアニメーションとして始まりましたが、最終的にはユニークで再利用可能なコンポーネントに成長しました。Koch は、このローダーが単なる状態表示を超えて、ユーザーが発見できる楽しいイースターエッグとなることを期待しています。