social-spotify-card
Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.
Security Assessment
About social-spotify-card
Social Spotify Card is a visual design template that renders a song, podcast, or personal blurb into a Spotify Now Playing-style card, with album art, a progress bar with timestamps, and playback controls. It solves the problem of quickly producing an attractive music-player-styled graphic for video overlays, personal about pages, or creator hero sections. It belongs to the nexu-io open-design collection and is inspired by the hyperframes spotify-card format.
The skill lays out a detailed design signature: two canvas sizes (1280x720 overlay or a compact 600x200 widget), Spotify's classic dark palette (#121212 background, #1DB954 green accent) or an album-art-derived gradient, typography using Spotify Circular with Inter fallbacks, a NOW PLAYING label, title/artist text, a progress bar with a percentage fill and timestamps, playback control icons, an inline Spotify logo, and an optional animated audio-wave effect that respects prefers-reduced-motion. The output is a single self-contained HTML file; external images are forbidden, with album art built from CSS gradients plus a monogram or geometric motif. If the input is generic text, it maps title to the track name, subtitle to the artist, and defaults a duration.
It targets creators, marketers, and anyone building personal or promotional pages who wants a music-player aesthetic. Use cases include a now-playing overlay for a video, a hero widget for an about page, or a stylized card for a track or podcast. It is a benign, offline front-end template with no code execution or network access.
FAQ
What does the template render?
A Spotify Now Playing-style card with album art, a NOW PLAYING label, track title and artist, a progress bar with timestamps, and playback control icons, as a single HTML file.
What sizes does it support?
Two: a 1280x720 landscape video-overlay layout and a compact 600x200 horizontal widget that can be embedded into any hero section.
How is album art handled?
External images are prohibited; album art is built from CSS gradients with a large monogram or abstract geometric motif, keeping the file self-contained.
What happens if I give it plain text?
It maps the title to the track name and the subtitle or author to the artist, and estimates a default duration (for example 3:42) if none is given.
Is the animation accessibility-friendly?
Yes. The optional audio-wave animation is implemented with CSS keyframes and can be disabled via prefers-reduced-motion.
Install social-spotify-card
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
nexu-io/open-design