social-spotify-card

【テンプレート：Spotify Now-Playing カード】 【意図】曲やポッドキャスト、自己紹介を Spotify の再生中カードとして表示します。動画のオーバーレイ、個人の about page、クリエイターのヒーローに適しています。Inspired by hyperframes spotify-card。

【キャンバス】サイズは 2 種類です。

• 横長の動画オーバーレイ：1280×720。カードは中央、または左下に配置します。
• コンパクトな横長ウィジェット：600×200。任意のヒーローに埋め込めます。

【カードの構成】

• 外枠：角丸 12-16px。背景にはアルバムカバーから抽出した暗いグラデーション（例：linear-gradient(135deg, #1e3264 0%, #0d1f3d 100%)）または Spotify の定番カラー #121212 を使用します。縁には控えめな 1px のボーダーを付けます。
• 左側：アルバムカバー（CSS グラデーション＋大きなイニシャルまたは抽象的な幾何学模様で表現し、外部画像へのリンクは不可）。角丸 6px、60-200px の正方形。
• 右側：
  • 上部に NOW PLAYING（大文字、字間 0.14em、11px、緑 #1DB954）。
  • 曲名／タイトル（Inter / Spotify Circular、22-28px、weight 700、白）。
  • アーティスト／副題（16px、weight 400、opacity 0.7）。
  • 進行状況バー：高さ 4px、角丸、グレーの背景＋白の塗りつぶし（width: 38%）。両端にタイムスタンプ 1:24 / 3:42（等幅、11px、グレー）。
  • コントロール行：⏮ ⏯ ⏭ アイコン（インライン SVG、24px、白の塗りつぶし）、シャッフル／リピートのアイコンは小さめにします。
• 右上：Spotify のロゴ（インライン SVG、緑 #1DB954 の円＋白い波線 3 本）。
• 任意：右下に小さな波形アニメーション（3 本のバー、@keyframes）。

【フォント】

• メイン：Spotify Circular → フォールバックとして Inter / Inter Tight、weight 400 / 700。
• 数字：メインと同じフォントを使用し、等幅フォントの使用は最小限にします。

【デザインの詳細】

• Spotify の定番ダークモード：背景 #121212、アクセント #1DB954、セカンダリテキスト #b3b3b3。
• ユーザーの入力がテキスト／タイトルの場合は、「タイトル」を曲名、「副題／作者」をアーティストとして扱い、デフォルトの「再生時間」を 3:42 として推定します。
• ユーザーの入力が音楽関連の場合は、その内容をそのまま反映します。
• 外部画像へのリンクは厳禁です。カバーは CSS グラデーション＋テキストロゴ／幾何学模様で表現します。
• 微細なアニメーション：波形アニメーションには @keyframes を使用し、prefers-reduced-motion で無効にできるようにします。
• 単一ファイルの HTML。