Ánimo de la música
Energía70Alegría65
XY-Pad für Stimmung
Ein XY-Pad wie am Synthesizer: Zieh den leuchtenden Punkt, um Musik gleichzeitig nach Energie und Stimmung zu filtern.
Einstellungen
Code
<div class="uvq05-xy"><p class="hd"><span>Stimmung der Musik</span><output aria-live="polite">Energisch und fröhlich</output></p><div class="pad" tabindex="0" role="slider" aria-label="Stimmung der Musik" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70"><span class="ax t">Fröhlich</span><span class="ax b">Düster</span><span class="ax l">Ruhig</span><span class="ax r">Energisch</span><i class="cx" aria-hidden="true"></i><i class="cy" aria-hidden="true"></i><i class="pt" aria-hidden="true"></i></div><p class="rd"><span>Energie</span><b class="ve">70</b><span>Freude</span><b class="va">65</b></p></div>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 Filter
Alle ansehen: FilterWofür du ihn nutzen kannst
Das Pad stammt aus Samplern und Effektgeräten und macht aus zwei Filtern eine einzige Geste: Die horizontale Position steht für Energie, die vertikale für Stimmung. Gebaut ist es mit HTML und CSS, ein kleines Skript liest Zeiger und Pfeiltasten. Es passt zu Musik-, Playlist- oder Podcast-Apps, in denen man nach Gefühl statt nach Genre sucht.
Passe die Akzentfarbe an deine Marke an und färbe mit der zweiten Farbe die Fläche des Pads. Benenne die Achsen für andere Paare um, etwa Preis und Entfernung, und zeig die Trefferliste direkt darunter, damit jede Bewegung sie aktualisiert.