Karte als Musikplayer

Eine kompakte „Läuft gerade“-Karte mit langsam drehendem Cover und Buttons, die beim Drücken nachfedern.

Einstellungen

Hauptfarbe#0071e3

Zweitfarbe#8ec5ff

Größe16px

Tempo1x

Text

Code

index.html

<article class="uv-cplay"><div class="cover"><i></i><b>◌</b></div><small>REPRODUCIENDO</small><h3>Soft Motion</h3><p>Nara Fields</p><div class="line"><i></i></div><footer><button>‹</button><button class="play">▶</button><button>›</button></footer></article>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Mehr aus Karten

3D-Tilt-Karte

KartenReact + Motion

Spotlight-Karte

KartenReact + Motion

Wetter- und Kalender-Widget

KartenReact + Motion

Karte mit Spotlight-Rand

KartenHTML + CSS

Karte mit Lift und Zoom

KartenHTML + CSS

Karte mit 3D-Flip

KartenHTML + CSS

Karte mit lebendigem Verlauf

KartenHTML + CSS

Karte mit verstecktem Inhalt

KartenHTML + CSS

Wofür du ihn nutzen kannst

Passt überall, wo Musik oder Audio zur Geschichte gehört: die neue Single auf der Website einer Indie-Band oder die aktuelle Folge auf der Landingpage eines Podcasts. Technisch steckt nur HTML und CSS dahinter: eine Musikplayer-Karte mit Verlaufs-Cover, das du in deinen eigenen Farben einfärbst.

Ton spielt sie von allein nicht ab. Verbinde die Buttons mit einem Audio-Element oder deinem Player und lass den Fortschrittsbalken mit der echten Zeit laufen. Sobald es ein Artwork gibt, ersetzt es das abstrakte Cover, und der Titel sollte in eine Zeile passen.