Ánimo de la músicaEnérgica y alegre

AlegreOscuraTranquilaEnérgica

Energía70Alegría65

HTML + CSSFiltros

Pad XY de ánimo

Un pad de sintetizador: arrastra el punto luminoso para filtrar música por energía y por ánimo a la vez.

Ajustes

16px
1x

Código

<div class="uvq05-xy"><p class="hd"><span>Ánimo de la música</span><output aria-live="polite">Enérgica y alegre</output></p><div class="pad" tabindex="0" role="slider" aria-label="Ánimo de la música" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70"><span class="ax t">Alegre</span><span class="ax b">Oscura</span><span class="ax l">Tranquila</span><span class="ax r">Enérgica</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>Energía</span><b class="ve">70</b><span>Alegría</span><b class="va">65</b></p></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Filtros

Ver todos: Filtros

Dónde usarlo

Tomado de los samplers y las unidades de efectos, este pad convierte dos filtros en un solo gesto: la posición horizontal marca la energía y la vertical el ánimo. Está hecho con HTML y CSS, y un pequeño script lee el puntero y las flechas del teclado. Encaja en apps de música, listas o pódcast donde se busca por sensación y no por género.

Cambia el color de acento para tu marca y usa el secundario para teñir la superficie del pad. Renombra los ejes para otras parejas, como precio y distancia, y coloca la lista de resultados justo debajo para que cada arrastre la actualice.