Ánimo de la música
Energía70Alegría65
Pad XY d'humeur
Un pad XY de synthétiseur : fais glisser le point lumineux pour filtrer la musique par énergie et par humeur en même temps.
Réglages
Code
<div class="uvq05-xy"><p class="hd"><span>Humeur de la musique</span><output aria-live="polite">Énergique et joyeuse</output></p><div class="pad" tabindex="0" role="slider" aria-label="Humeur de la musique" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70"><span class="ax t">Joyeuse</span><span class="ax b">Sombre</span><span class="ax l">Calme</span><span class="ax r">Énergique</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>Énergie</span><b class="ve">70</b><span>Joie</span><b class="va">65</b></p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Voir tout : FiltresOù l’utiliser
Inspiré des échantillonneurs et des boîtes d'effets, ce pad transforme deux filtres en un seul geste : la position horizontale règle l'énergie, la verticale l'humeur. Il est fait en HTML et CSS, avec un petit script qui lit le pointeur et les flèches du clavier. Il trouve sa place dans les applis de musique, de playlists ou de podcasts où l'on cherche par ressenti plutôt que par genre.
Change la couleur d'accent selon ta marque et utilise la seconde pour teinter la surface du pad. Renomme les axes pour d'autres paires, comme prix et distance, et affiche la liste de résultats juste dessous pour que chaque geste la mette à jour.