XY mood pad filter

A synth-style XY pad: drag the glowing dot to filter music by energy and mood at the same time.

Settings

Main color#ff5b14

Secondary color#2a2a2a

Size16px

Speed1x

Text

Code

index.html

<div class="uvq05-xy"><p class="hd"><span>Music mood</span><output aria-live="polite">Energetic and happy</output></p><div class="pad" tabindex="0" role="slider" aria-label="Music mood" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70"><span class="ax t">Happy</span><span class="ax b">Dark</span><span class="ax l">Calm</span><span class="ax r">Energetic</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>Energy</span><b class="ve">70</b><span>Joy</span><b class="va">65</b></p></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Filters

See all Filters

Filter chips

FiltersReact + Motion

Segmented control

FiltersReact + Motion

Multi-select dropdown

FiltersReact + Motion

Sliding pill filter chips

FiltersHTML + CSS

Centre-fill filter chips

FiltersHTML + CSS

Gradient border chips

FiltersHTML + CSS

Checkmark filter chips

FiltersHTML + CSS

Removable chips with X

FiltersHTML + CSS

Where to use it

Borrowed from hardware samplers and effect units, this pad turns two filters into one gesture: horizontal position sets energy and vertical position sets mood. It is built with plain HTML and CSS, and a small script reads the pointer and the arrow keys. Use it in music, playlist or podcast apps where people browse by feeling rather than by genre.

Change the accent colour to match your brand and use the second colour to tint the pad surface. Rename the axis labels for other pairs, such as price and distance, and show the result list right under the pad so every drag updates it.