Stem Icons

分轨功能的 8 个音轨图标（含原曲）。自绘 SVG，1.5 描边 + 一处实心重点 + 浅色填充，currentColor继承；部件动画在 stem-icon.css，hover 播一次，playing 循环。

Gallery

8 个 stem，每个图标设计上视觉互不重叠

Vocalsvocals
Instrumentalinstrumental
Drumsdrums
Bassbass
Guitarguitar
Pianopiano
Otherother
Originaloriginal

Motion

三个动画档位。卡片带 STEM_MOTION_TRIGGER，整块区域 hover 都会带动图标；颜色是深色主题下的身份色。

hover鼠标移到卡片上（或 Tab 聚焦）播一次

playing循环：这一轨正在响

none静态

Sizes

从 chip 用的 12px 到展示用的 64px，验证不同尺寸下细节保留 (12 / 14 / 16 / 20 / 24 / 32 / 48 / 64)

Vocals
12
14
16
20
24
32
48
64
Instrumental
12
14
16
20
24
32
48
64
Drums
12
14
16
20
24
32
48
64
Bass
12
14
16
20
24
32
48
64
Guitar
12
14
16
20
24
32
48
64
Piano
12
14
16
20
24
32
48
64
Other
12
14
16
20
24
32
48
64
Original
12
14
16
20
24
32
48
64

Mode Chips（实际形态）

模拟 stem-mode-toggle 在 /stem-splitter 上的 3 个 mode 卡片，验证图标在 LuminousCard 深色背景下的可读性

Vocals & Instrumental
VocalsInstrumental
~25s2 credits
4 Stems
VocalsDrumsBassOther
~30s4 credits
6 Stems
VocalsDrumsBassGuitarPianoOther
~35s6 credits

Result Rows（实际形态）

模拟 stem-result-panel 列表项 — 图标在播放按钮和波形之间，跟 label 同一行

Vocals
Instrumental
Drums
Bass
Guitar
Piano
Other
Original

Color Contexts

检验图标在不同亮度背景下的视觉权重

Light

Muted

Dark

Dim

Picker

单图标大图预览，调试 strokeWidth

Stem

Stroke

1.7

Import

import { StemIcon } from
  '@/components/stems/stem-icon'

<StemIcon stem="vocals" />