social-spotify-card

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

【模板: 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
```
→ fallback
```
Inter
```
/
```
Inter Tight
```
, weight 400 / 700。
数字: 同主字体, 不用 mono 太多。

【设计细节】

Spotify 经典 dark mode:
```
#121212
```
bg,
```
#1DB954
```
accent,
```
#b3b3b3
```
secondary text。
若用户输入是文本/标题 → 把 "标题" 当歌名, "副标/作者" 当艺人, 估算"时长" 3:42 默认。
若用户输入是音乐相关 → 直接对应。
严禁外链图片; 封面用 CSS 渐变 + 文字 logo / 几何描绘。
微动效: 音波动效用
```
@keyframes
```
, 可被
```
prefers-reduced-motion
```
关闭。
单文件 HTML。

【Template: Spotify Now-Playing Card】【Purpose】Render a song, podcast, or personal introduction into 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 at bottom-left corner.
Compact Horizontal Widget: 600×200, embeddable into any hero section.

【Card Structure】

Frame: 12-16px rounded corners; background uses a dark gradient extracted from album cover colors (e.g.
```
linear-gradient(135deg, #1e3264 0%, #0d1f3d 100%)
```
) or Spotify's classic
```
#121212
```
; with a 1px subtle border on the edge.
Left Side: Album Cover (CSS gradient + large monogram or abstract geometric illustration, no external images allowed), 6px rounded corners, 60-200px square.
Right Side:
- Top:
```
NOW PLAYING
```
  (uppercase, letter-spacing 0.14em, 11px, green
```
#1DB954
```
  ).
- Song Title / Heading (Inter / Spotify Circular, 22-28px, font-weight 700, white).
- Artist / Subtitle (16px, font-weight 400, opacity 0.7).
- Progress Bar: 4px height, rounded corners, gray background + white fill (
```
width: 38%
```
  ); timestamps
```
1:24 / 3:42
```
  on both ends (monospace, 11px, gray).
- Control Row: ⏮ ⏯ ⏭ icons (inline SVG, 24px, white fill), shuffle/repeat icons are smaller.
Top-right Corner: Spotify logo (inline SVG, green
```
#1DB954
```
circle + three white waves).
Optional: Small audio wave animation at bottom-right corner (3 bars with
```
@keyframes
```
).

【Fonts】

Primary:
```
Spotify Circular
```
→ fallback to
```
Inter
```
/
```
Inter Tight
```
, font-weight 400 / 700.
Numbers: Same as primary font, avoid overusing monospace.

【Design Details】

Spotify Classic Dark Mode:
```
#121212
```
background,
```
#1DB954
```
accent color,
```
#b3b3b3
```
secondary text.
If user input is text/heading → treat "heading" as song title, "subtitle/author" as artist, default estimated "duration" is 3:42.
If user input is music-related → map directly.
External images are strictly prohibited; use CSS gradient + text logo / geometric illustration for the cover.
Micro-interactions: Audio wave animation uses
```
@keyframes
```
, can be disabled by
```
prefers-reduced-motion
```
.
Single-file HTML.