social-spotify-card
nexu-io/open-design
Spotify Now Playing-style card with album art, progress bar, and playback controls for overlays and homepages.
What is social-spotify-card?
A web-based card component that mimics Spotify's Now Playing interface, featuring album artwork, track progress, and playback controls. Use it for video overlays, personal homepages, or creator hero sections.
- Renders a dark-themed card with Spotify's signature design (1280×720 or 600×200 aspect ratios)
- Displays album art using CSS gradients and geometric patterns (no external images)
- Shows track title, artist name, and progress bar with time stamps
- Includes playback control icons (previous, play/pause, next) and optional shuffle/repeat buttons
- Supports optional animated waveform effect with motion-preference respect
- Uses Spotify's official color scheme (#121212 background, #1DB954 green accent)
How to install social-spotify-card
npx skills add https://github.com/nexu-io/open-design --skill social-spotify-cardHow to use social-spotify-card
- 1.Install the skill using the provided npm command
- 2.Open the index.html file in a web browser or integrate it into your project
- 3.Customize the card by editing the track title, artist name, and duration in the HTML
- 4.Optionally adjust the background gradient or add your own CSS gradient for the album art
- 5.Test the playback controls and waveform animation across different screen sizes
Use cases
- Embed a now-playing card in video overlays or streaming content
- Display current music or podcast on a personal about page or creator homepage
- Create a compact music widget (600×200) for integration into hero sections
- Showcase a song, podcast episode, or personal introduction in Spotify's visual style
- Add a branded music card to portfolio or social media landing pages
- Content creators and streamers
- Musicians and podcasters
- Web designers building personal portfolios
- Anyone creating video overlays or hero sections
social-spotify-card FAQ
No, the design intentionally uses CSS gradients and geometric patterns instead of external images to keep the component self-contained and lightweight.
Two primary sizes: 1280×720 for video overlays and 600×200 for compact widget integration.
Edit the track title, artist name, and duration directly in the HTML. The component uses placeholder values by default.
Yes, the optional waveform animation respects the prefers-reduced-motion CSS media query for accessibility.
Spotify Circular is the primary font with Inter or Inter Tight as fallbacks; the component works without requiring external font files.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: social-spotify-card zh_name: "Spotify 正在播放卡" en_name: "Spotify Now-Playing Card" emoji: "🎵" description: "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages." zh_description: "Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页" en_description: "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages." category: card scenario: personal aspect_hint: "1280×720 或 600×200" featured: 43 tags: ["spotify", "music", "now-playing", "card", "overlay"] example_id: sample-social-spotify-card example_name: "Spotify Now Playing · Lo-Fi" example_format: markdown example_tagline: "Spotify 经典 dark 卡" example_desc: "Lo-Fi Beats · Chillhop 进度条 1:24 / 3:42 + 控制行" example_source_url: "https://hyperframes.heygen.com/catalog" example_source_label: "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 design_system: requires: false example_prompt: "Use the Spotify Now-Playing Card template to turn my content into a Spotify Now Playing-style card with album art, progress bar, and playback controls for a video overlay or personal homepage. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." example_prompt_i18n: zh-CN: "用「Spotify 正在播放卡」模板把我的内容做成一份「Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
【模板: Spotify Now-Playing 卡】 【意图】把一首歌、一段播客、或一段个人介绍渲染成 Spotify 正在播放卡, 适合 video overlay / 个人 about page / 创作者 hero。Inspired by hyperframes spotify-card。
【画布】两个尺寸:
- 横版视频叠加: 1280×720, 卡片居中或左下角浮动。
- 紧凑横条 widget: 600×200, 可嵌入到任何 hero。
【卡片结构】
- 外框: 圆角 12-16px; bg 用专辑封面色提取的暗渐变 (e.g.
linear-gradient(135deg, #1e3264 0%, #0d1f3d 100%)) 或 Spotify 经典#121212; 边缘有 1px subtle border。 - 左侧: 专辑封面 (CSS 渐变 + 大字 monogram 或抽象几何描绘, 不能外链图片), 圆角 6px, 60-200px 方形。
- 右侧:
- 顶部
NOW PLAYING(uppercase letterspace 0.14em, 11px, 绿色#1DB954)。 - 歌名 / 标题 (Inter / Spotify Circular, 22-28px, weight 700, 白色)。
- 艺人 / 副标 (16px, weight 400, opacity 0.7)。
- 进度条: 4px 高, 圆角, 灰色背景 + 白色 fill (
width: 38%); 两端时间戳1:24 / 3:42(mono, 11px, 灰)。 - 控制行: ⏮ ⏯ ⏭ icon (inline SVG, 24px, 白色 fill), shuffle / repeat icon 较小。
- 顶部
- 右上角: Spotify logo (内联 SVG, 绿色
#1DB954圆 + 三道白色波纹)。 - 可选: 右下角小型音波动效 (3 个 bar
@keyframes)。
【字体】
- 主:
Spotify Circular→ fallbackInter/Inter Tight, weight 400 / 700。 - 数字: 同主字体, 不用 mono 太多。
【设计细节】
- Spotify 经典 dark mode:
#121212bg,#1DB954accent,#b3b3b3secondary text。 - 若用户输入是文本/标题 → 把 "标题" 当歌名, "副标/作者" 当艺人, 估算"时长" 3:42 默认。
- 若用户输入是音乐相关 → 直接对应。
- 严禁外链图片; 封面用 CSS 渐变 + 文字 logo / 几何描绘。
- 微动效: 音波动效用
@keyframes, 可被prefers-reduced-motion关闭。 - 单文件 HTML。
Related skills
More from nexu-io/open-design and the wider catalog.
social-x-post-card
Realistic X post card with engagement metrics for video overlays and shareable images.
sora
Generate and manage short video clips using OpenAI's Sora API for cinematic content.
speech
Generate spoken audio from text using OpenAI's text-to-speech API with multiple voices.
stitch-design-taste
Generate premium, anti-generic DESIGN.md files for Google Stitch with strict typography, color calibration, and semantic design rules.
stitch-loop
Iterative design-to-code feedback loop for tightening visual fidelity between brief and built UI.
swiftui-design
SwiftUI design system with anti-slop rules, brand protocols, and multi-dimensional review for iOS frontends.