アニメーションポルカドット背景

CSSの radial-gradient を利用して、軽量かつクリーンな水玉模様（ポルカドット）を描画する背景コンポーネントです。画像を一切使用しないため、読み込みが高速で自由にカスタマイズ可能です。

ユースケースと特徴 (Use Cases & Features)

• LPやヒーローセクション: メインビジュアルの背景として、主張しすぎない動きを加えることでモダンな印象を与えます。
• カードやモーダルの背景: シンプルな単色背景に飽きた際の、アクセントとして最適です。
• パフォーマンス: 画像（SVGやPNG）をロードせずCSSのみで完結するため、LCP（Largest Contentful Paint）に悪影響を与えません。

デザインとUXのポイント (Design & UX)

• かすかなアニメーション: transform を使ってゆっくりと斜めに移動させることで、静的なページに奥行きとリズムをもたらします。
• ビネット（周辺減光）効果: 中央部分はくっきりと模様が見え、端に行くにつれて背景色に溶け込むようなオーバーレイ（radial-gradient）を重ねることで、上に配置するテキストやコンテンツの視認性を高めています。
• ダークモード対応: :global(.dark) クラスやメディアクエリを活用し、背景色やドットの色がシームレスに切り替わるように設計されています。

カスタマイズ方法 (Customization Guide)

CSS変数を変更するだけで、ドットのサイズや間隔を簡単に調整できます。

• --dot-size: ドットの半径（例: 2px にすると大きくなります）
• --dot-space: ドット同士の間隔（例: 32px にすると密度が下がります）
• --dot-color-light / --dot-color-dark: ドットの色を変更します。テーマカラーに合わせた薄い色を指定するのがおすすめです。

実装コード (Implementation)

export const PolkaDotBackground: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
return (
  <div className="polka-container relative w-full min-h-[400px] flex items-center justify-center overflow-hidden bg-slate-50 dark:bg-slate-950">
    {/* Polka Dot Pattern */}
    <div className="polka-dots absolute inset-0"></div>
    
    {/* Vignette Overlay */}
    <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(248,250,252,0.85)_100%)] dark:bg-[radial-gradient(circle_at_center,transparent_0%,rgba(2,6,23,0.85)_100%)]"></div>
    
    {/* Content */}
    <div className="relative z-10">
      {children}
    </div>
  </div>
);
};

ブラウザ対応状況 (Browser Support)

すべてのモダンブラウザ（Chrome, Firefox, Safari, Edge）で完全にサポートされています。GPUアクセラレーションが有効な transform を使ってアニメーションさせるため、スクロール時や他の重い処理の実行時にも非常に滑らかに動作します。