This simple visualization uses two event-driven elements—<show-blam> and <seed-blam>—and a little CSS animation.
As the name suggests, <show-blam> just... shows stuff. In this case, I'm showing the characters for the term HYPERBLAM in turn. So I apply the cycle prop.
<show-blam from="#keys" cycle>...</show-blam>
The <seed-blam> element is simple but powerful. It adds custom properties with random values between 0 and 1. These can be used to randomize all sorts of styles. In this case, two seeds are applied for affecting scale.
show-blam {
transform: scale(max(0.25, var(--seed-stretch-1)), max(0.25, var(--seed-stretch-2)));
}
(Note the max() function, ensuring the scale—on either axis—is never smaller than 0.25.)
Both <show-blam> and <seed-blam> respond to the <pads-blam>’s generic “blam” event. That is, every time a sound is played, a new character—semi-randomly stretched—appears.
Each character’s element has a CSS animation applied that jolts/shakes the character as it appears. This acts as a visual metaphor for the rattling sound of the keys.