Spotify profile on social media

--- name: social-spotify-card zhname e: "Spotify Now Playing Card" enname e: "Spotify Now-Playing Card" emoji: "🎵" description: "Spotify Now Playing-style card: album cover + progress bar + playback controls, optimized for video overlays / personal profiles" category: card scenario: personal aspecthint : "1280×720 or 600×200" featured: 43 tags: ["spotify", "music", "now-playing", "card", "overlay"] exampleid : sample-social-spotify-card examplename : "Spotify Now Playing · Lo-Fi" exampleformat : markdown exampletagline : "Spotify Classic Dark Card" exampledesc : "Lo-Fi Beats · Chillhop Progress Bar 1:24 / 3:42 + Control Bar" examplesourceurl : "https://hyperframes.heygen.com/catalog" examplesourcelabel : "hyperframes · spotify-card" od: mode: prototype surface: web platform: desktop scenario: personal upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 designsystem : requires: false exampleprompt : "Use the 'Spotify Now Playing Card' template to turn my content into a'Spotify Now Playing-style card: album cover + progress bar + playback controls, optimized for video overlays / personal homepages.' Maintain the template’s visual signature, use real content and data, and avoid lorem ipsum and placeholder images." --- 【Template: Spotify Now-Playing Card】 【Purpose】Render a song, a podcast episode, or a personal introduction as a Spotify Now-Playing card, suitable for video overlays / personal about pages / creator hero sections. Inspired by hyperframes spotify-card. 【Canvas】Two sizes: - Landscape video overlay: 1280×720, card centered or floating in the bottom-left corner. - Compact horizontal widget: 600×200, embeddable in any hero section. 【Card Structure】 - Border: 12:16px rounded corners; background uses a dark gradient extracted from the album cover color (e.g.,linear-gradient(135deg, #1e3264 0%, #0d1f3d 100%) ) or Spotify’s classic#121212 ; features a subtle 1px border around the edges. - Left side: Album cover (CSS gradient + large monogram or abstract geometric design; external image links are not allowed), 6px rounded corners, 60:200px square. - Right side: - TopNOW PLAYING s (uppercase letterspacing 0.14em, 11px, green#1DB954 ). - Song Title / Title (Inter / Spotify Circular, 22:28px, weight 700, white). - Artist / Subtitle (16px, weight 400, opacity 0.7). - Progress bar: 4px high, rounded corners, gray background + white fill (width: 38% ); Timestamps at both ends1:24 / 3:42 (mono, 11px, gray). - Control row: ⏮ ⏯ ⏭ icons (inline SVG, 24px, white fill), smaller shuffle/repeat icon. - Top-right corner: Spotify logo (inline SVG, green#1DB954 circle + three white ripples). - Optional: Small sound wave animation in the bottom-right corner (3-bar@keyframes ). 【Fonts】 - Primary:Spotify Circular → fallbackInter /Inter Tight , weight 400 / 700. - Numbers: Same as primary font; avoid using too much "mono." 【Design Details】 - Spotify classic dark mode:#121212 for background,#1DB954 for accent,#b3b3b3 for secondary text. - If user input is text/title → treat "Title" as song title, "Subtitle/Author" as artist, and estimate "Duration" as 3:42 by default. - If the user’s input is music-related → map it directly. - External image links are strictly prohibited; use CSS gradients + text logos or geometric designs for the cover art. - Micro-animations: Use the sound wave animation from@keyframes ; this can be disabled viaprefers-reduced-motion . - Single HTML file.