2026年の Aceternity UI 代替：動きのある React ライブラリを無料と有料で比較

まとめ： Aceternity UI の主な代替は Magic UI、React Bits、DesignLayer です。Magic UI と React Bits は、大きい無料ライブラリに加えて買い切りの有料プランがあります（Magic UI Pro は $199、React Bits Pro は $129〜$349）。Aceternity の All-Access は年額 $169、または買い切り $199 です。DesignLayer は、動きまで組んであるセクションをライブプレビューで見て、Cursor や Claude Code に渡したいときに向きます。無料プランは1日3回コピーでき、Plus は月額 $9 でコピー無制限、いつでも解約できます。ランディングページを1枚作るだけなら、買い切りより安く済むことが多いです。

価格は 2026年10月19日に、各社の公式料金ページで確認しました。変わりやすいので、購入前にもう一度確かめてください。

Aceternity UI は、React 向けのアニメーションコンポーネントライブラリとしてよく知られています。React、Next.js、Tailwind CSS、Framer Motion で組まれていて、映画のような暗い SaaS のランディングページで知られています。代替を探し始める理由は、だいたい次の3つです。

• 価格と案件の規模。 有料は年額か買い切りです。サイトを何本も出すなら割に合います。ランディングページ1枚だと、多く感じることがあります。

• 見た目。 流行ったスタイルは、どのローンチページも同じに見え始めます。

• 作り方。 Cursor や Claude Code にページを作らせるチームが増えています。デモの見栄えだけでなく、エージェントがどれだけきれいに入れられるかが大事になります。

コピーして貼るモーションコンポーネントでランディングページを出したことがあるなら、次のような経験があるかもしれません。

• デモは滑らかなのに、自分のアプリではスクロールアニメーションが動かない。親に overflow: hidden が付いている。

• 演出を1つ貼ったら、アニメーションライブラリと cn()、Tailwind の設定変更が必要だと分かる。

• 光る枠や文字のシマーのような小さい演出を継ぎはぎしてセクションにすると、1つのデザインに見えなくなる。

• 買い切りを払って3ブロック使い、案件は終わる。

だからといって Aceternity、Magic UI、React Bits が悪いわけではありません。どれも優れています。デモの見た目だけでなく、どう作るかで選ぶ、という意味です。

ほとんどの判断は、次の5つで足ります。

1. 再利用の単位。 小さい演出や部品か、ページのセクション（ヒーロー、料金、FAQ、フッター）か。

2. アニメーションの仕組み。 1つのライブラリ（多くの場合 Framer Motion / Motion）に固定か、コンポーネントごとに合うもの（CSS、GSAP、Three.js）を使うか。

3. 料金の形。 無料＋買い切り、年額、月額のどれか。

4. ライセンス。 クライアントのサイトに使ってよいか。再配布してはいけないものは何か。

5. エージェントへの引き渡し。 コピーに、依存関係やセットアップ、見本のプレビューなど、AI コーディングエージェントが要るものが入っているか。MCP サーバーはあるか。

注意が2つあります。DesignLayer のカタログは明らかに少ないです。買い切りもありません。 演出を何百も欲しいとき、一度払ってあとは考えたくないときは、ほかの3つの方が向きます。

DesignLayer は、動きを先に組んだ React のセクションを集めたカタログです。どれも React、TypeScript、Tailwind CSS で、ライブプレビューが付きます。考え方は、セクションの動きを見てから、エージェントに渡すことです。

• Aceternity UI は、映画のような暗い SaaS の見た目が欲しく、ブロックやテンプレートを何本もの案件で使い回すとき。

• Magic UI は、shadcn/ui で作っていて、磨かれた細かいインタラクションと、買い切りの Pro が欲しいとき。

• React Bits は、テキスト演出や背景をたくさん欲しいとき、素の CSS のバリエーションが要るとき、Motion を必須にしたくないとき。

• DesignLayer は、ライブプレビュー付きの完成したモーションセクション、Cursor と Claude Code 向けのコピー一式、同じ場所にあるローンチ動画のプロンプト、ライセンスではなく低い月額が欲しいとき。

併用もできます。背景の演出は一方から、料金やヒーローのセクションはもう一方から取るチームは多いです。

1. 無料で見る。 コンポーネント一覧 を開き、ライブプレビューを見ます。カードは要りません。

2. セクションを1つプロジェクトへコピーする。 Copy for Cursor を押して、Cursor か Claude Code に貼ります。無料は1日3回です。初めてなら、このガイド が最初のセクションまで案内します。

3. 作っているあいだだけ無制限にする。 作業の途中で1日の上限に達したら、Plus を月額 $9 で始める。コンポーネントのコピー、動画プロンプトのコピー、MCP が無制限になり、いつでも解約できます。

今週ランディングページを作るなら。 キネティック・サービス料金 か 製品機能ベントー から始めてください。無料でコピーし、ページの残りが必要になったら Plus — 月額 $9 にします。

関連記事： Cursor 向け 21st.dev の代わり · React モーション UI カタログを比べる6項目 · Cursor MCP で UI コンポーネントを取り込む