Dot Matrix

ドットマトリックス（点描）ローダーのReactコンポーネントライブラリ。shadcnレジストリ経由でインストールして、ローカルコードとして所有する

Summary

ドットの集合で動くローディングアニメーションを集めた React コンポーネントライブラリ。shawn (@zzzzshawn) が公開。

55個以上のローダーを収録（v1.5.0時点）。Neon Drift、Pulse Ladder、Helix Glow、Twin Orbit、Checker Shift、Binary Bloom、Sound Bars など、幾何学パターン・軌道・波形系のバリエーションが揃う。

shadcn registry に対応していて、npx shadcn@latest add @dotmatrix/dotm-square-3 のように単体でインストールできる。コードは自分のリポジトリにコピーされ、後から自由に書き換えられる。

React + TypeScript + Tailwind CSS で実装。MIT のオープンソース。

URL: https://dotmatrix.zzzzshawn.cloudDATE: 2026年5月12日

関連リソース

珍しいアニメーション付きReactコンポーネントの無料・オープンソースなレジストリ。Tailwind CSS、Motion、shadcn CLIで作られていて、コピペして自分のコードにできる。

サイト、Webアプリ、モバイル、コンポーネント、フローのデザインチェックリスト集。細部まで確認して、より良いものを出す。

クリック直後の0.5秒を扱うReact向けマイクロインタラクション集。54個のコンポーネントを、部品の種類ではなく人が何の最中かで10セクションに分類。ソースをコピーして使い、依存はmotionだけ。

デザインのScopeを、
もっと広げよう。

noteメンバーシップで、デザインの深掘り記事を毎週配信。

チームへのデザイン導入・研修もご相談ください。