マーキー（Marquee）

このページでは、Mantine・react-fast-marquee・CSSのみを使ったマーキー（無限横スクロール）の実装パターンをインタラクティブなデモとコードで確認できます。

@mantine/corev9.1.1 react-fast-marqueev1.6.5

Mantine Marquee

Mantine v9 で追加された Marquee コンポーネント。pauseOnHover でホバー停止、reverse で逆方向、fadeEdges でエッジのフェード、duration でアニメーション時間（ms）を制御できる。

pauseOnHoverreversefadeEdgesdurationrepeat

読み込み中...

tsx

'use client';
import { MantineProvider, Marquee } from '@mantine/core';
import '@mantine/core/styles.css';

const items = ['React', 'TypeScript', 'Next.js', 'Tailwind CSS', 'Mantine', 'ECharts', 'Recharts', 'Framer Motion', 'Vercel', 'Vite'];

export function MantineMarqueeDemo() {
  return (
    <MantineProvider>
      <div className="space-y-6">
        {/* デフォルト */}
        <Marquee pauseOnHover>
          {items.map((item) => (
            <span key={item} className="px-3 py-1.5 mx-2 border border-gray-300 rounded-full text-sm font-medium">
              {item}
            </span>
          ))}
        </Marquee>

        {/* 逆方向 */}
        <Marquee reverse pauseOnHover>
          {items.map((item) => (
            <span key={item} className="px-3 py-1.5 mx-2 border border-blue-300 rounded-full text-sm font-medium text-blue-700">
              {item}
            </span>
          ))}
        </Marquee>

        {/* フェードエッジ + 速度アップ */}
        <Marquee pauseOnHover fadeEdges duration={20000}>
          {items.map((item) => (
            <span key={item} className="px-3 py-1.5 mx-2 border border-green-300 rounded-full text-sm font-medium text-green-700">
              {item}
            </span>
          ))}
        </Marquee>
      </div>
    </MantineProvider>
  );
}

🤖 AIプロンプトテンプレート

マーキー（無限横スクロール）を実装してください。
以下の仕様で作成してください。

- ライブラリ: [react-fast-marquee / Mantine Marquee / CSSのみ]
- スクロール速度: [遅い / 普通 / 速い]
- ホバー時: [停止する / 停止しない]
- コンテンツ: [テキスト / カードコンポーネント / 画像]
- エッジのフェード: [あり / なし]

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

ライブラリ比較

項目	Mantine Marquee	react-fast-marquee	CSS のみ
依存ライブラリ	@mantine/core	react-fast-marquee	なし
バンドルサイズ	⚠️ 中（Mantine全体）	✅ 小	✅ 0
ホバー停止	✅ pauseOnHover	✅ pauseOnHover	❌ 要自前実装
グラデーション	✅ fadeEdges	✅ gradient	△ 要自前実装
逆方向スクロール	✅ reverse	✅ direction	△ 要自前実装
縦スクロール	✅ orientation: vertical	✅ direction: up/down	△ 要自前実装
カスタマイズ性	✅ 高（Mantineテーマ）	△ 中	✅ 高（自由度最大）
向いているケース	Mantine導入済みプロジェクト	手軽に高品質を求める場合	依存を増やしたくない場合

選択のポイント

Mantine Marquee — Mantine を既に使っているプロジェクトなら追加コスト0で利用可能。fadeEdges・reverse・orientation など豊富なプロパティが揃っており、 Mantineテーマとの統合も容易。
react-fast-marquee — 軽量で導入が簡単。speed（px/秒単位）による直感的な速度制御とgradient によるエッジフェードが便利。 Mantine 未使用のプロジェクトでも手軽に品質の高いマーキーを実装したい場合に最適。
CSS のみ — 外部依存を一切増やしたくない場合や、完全なデザイン制御が必要な場合に適している。コンテンツを2セット並べて translateX(-50%) でループさせる仕組みを理解しておくと応用範囲が広い。ホバー停止・グラデーション・縦スクロールなどの機能は自前実装が必要。