social-spotify-card

[Template: Spotify Now-Playing Card] [Intent] Render a song, a podcast episode, or a personal introduction as a Spotify now-playing card, suitable for video overlay / personal about page / creator hero. Inspired by hyperframes spotify-card.

[Canvas] Two sizes:

• Landscape video overlay: 1280×720, card centered or floating in the bottom-left corner.
• Compact horizontal bar widget: 600×200, can be embedded into any hero.

[Card Structure]

• Outer frame: rounded corners 12-16px; bg uses a dark gradient extracted from the album cover colors (e.g. linear-gradient(135deg, #1e3264 0%, #0d1f3d 100%)) or Spotify classic #121212; edges have a 1px subtle border.
• Left side: album cover (CSS gradient + large monogram or abstract geometric depiction, no external image links allowed), rounded corners 6px, 60-200px square.
• Right side:
  • Top NOW PLAYING (uppercase letterspace 0.14em, 11px, green #1DB954)。
  • song name / title (Inter / Spotify Circular, 22-28px, weight 700, white).
  • artist / subtitle (16px, weight 400, opacity 0.7)。
  • Progress bar: 4px tall, rounded, gray background + white fill (width: 38%); timestamps at both ends 1:24 / 3:42 (mono, 11px, gray).
  • Control row: ⏮ ⏯ ⏭ icons (inline SVG, 24px, white fill), shuffle / repeat icons smaller.
• Top-right corner: Spotify logo (inline SVG, green #1DB954 circle + three white waves).
• Optional: small sound-wave animation in the bottom-right corner (3 bars @keyframes)。

[Fonts]

• Primary: Spotify Circular → fallback Inter / Inter Tight, weight 400 / 700。
• Numbers: same as the primary font, don't use mono too much.

[Design Details]

• Spotify classic dark mode: #121212 bg, #1DB954 accent, #b3b3b3 secondary text。
• If the user input is text/title → treat the "title" as the song name, the "subtitle/author" as the artist, and estimate the "duration" as 3:42 by default.
• If the user input is music-related → map it directly.
• External image links are strictly prohibited; use CSS gradients + text logo / geometric depiction for the cover.
• Micro-animations: sound-wave animation uses @keyframes, can be turned off by prefers-reduced-motion .
• Single-file HTML.