This simple visualization introduces a new event-based element: <some-blam>. It works like <blam-blam> but one affects some of the selected to elements each event. In this case, it’s used with max="1" and robin. These two conditions mean each selected element is affected, in order, at each event.
<some-blam prop="hidden" to="#glyphs > *" robin revert max="1"></some-blam>
Every time the parent <pad-blam> triggers a sound, the next #glyphs > * element is unhidden. Since revert is also in place, all but the selected element are reverted to their initial hidden state each time.
The <some-blam> is used in conjunction with a couple of <blam-blam>s setting CSS custom properties. These are like seed numbers, setting a random value between 0 and 1 at each sound event:
<blam-blam prop="--stretch-x" to="#glyphs" value="0~1"></blam-blam>
<blam-blam prop="--stretch-y" to="#glyphs" value="0~1"></blam-blam>
The CSS applies these to stretch the characters in different ways. Note the use of CSS’s max() function here, making sure no glyph is ever squished below 0.25 (25%) along either axis.
show-blam {
transform: scale(max(0.25, var(--stretch-x)), max(0.25, var(--stretch-y)));
}
Each character’s element has a CSS animation applied that jolts/shakes the character as it is unhidden. This is a visual metaphor for the rattling sound of the keys.
animation: jolt 0.15s linear 1;