Drum machine pad
A rubber pad that lights up brighter the closer to the center you hit it, with the velocity shown in the corner.
Settings
Code
<button class="uvq01-pad" type="button"><span class="lt" aria-hidden="true"></span><span class="t">Kick</span><span class="v" aria-hidden="true">VEL <b>000</b></span></button>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.
More in Buttons
See all ButtonsWhere to use it
Inspired by the pads on samplers and drum machines, this square rubber button reads where you strike it: hits near the center glow at full strength, hits on the edge stay dimmer, and a small readout shows the velocity from 0 to 127. The light fades out like an LED under translucent silicone. It fits music apps, beat makers, sound boards and playful dashboards.
The main color is the LED and the secondary color is the hot center of the flash, so magenta with yellow or cyan with white both work. Use the label for the sound name, and build a grid of pads with different labels for a full kit.