Synth patch card with knobs
A synth preset card with three knobs you turn by dragging or with the arrow keys, redrawing the waveform as you go.
Settings
Code
<article class="uvq07-syn"><header><span class="id">P07</span><h3>Glass bass</h3><span class="bpm">120 BPM</span></header><div class="sc" aria-hidden="true"><svg viewBox="0 0 100 40" preserveAspectRatio="none"><line class="ax" x1="0" x2="100" y1="20" y2="20"/><polyline class="wv" points="0.0,20.00 0.8,14.90 1.7,10.84 2.5,8.27 3.3,7.14 4.2,7.15 5.0,7.93 5.8,9.13 6.7,10.40 7.5,11.44 8.3,12.11 9.2,12.37 10.0,12.30 10.8,12.05 11.7,11.81 12.5,11.72 13.3,11.81 14.2,12.05 15.0,12.30 15.8,12.37 16.7,12.11 17.5,11.44 18.3,10.40 19.2,9.13 20.0,7.93 20.8,7.15 21.7,7.14 22.5,8.27 23.3,10.84 24.2,14.90 25.0,20.00 25.8,25.10 26.7,29.16 27.5,31.73 28.3,32.86 29.2,32.85 30.0,32.07 30.8,30.87 31.7,29.60 32.5,28.56 33.3,27.89 34.2,27.63 35.0,27.70 35.8,27.95 36.7,28.19 37.5,28.28 38.3,28.19 39.2,27.95 40.0,27.70 40.8,27.63 41.7,27.89 42.5,28.56 43.3,29.60 44.2,30.87 45.0,32.07 45.8,32.85 46.7,32.86 47.5,31.73 48.3,29.16 49.2,25.10 50.0,20.00 50.8,14.90 51.7,10.84 52.5,8.27 53.3,7.14 54.2,7.15 55.0,7.93 55.8,9.13 56.7,10.40 57.5,11.44 58.3,12.11 59.2,12.37 60.0,12.30 60.8,12.05 61.7,11.81 62.5,11.72 63.3,11.81 64.2,12.05 65.0,12.30 65.8,12.37 66.7,12.11 67.5,11.44 68.3,10.40 69.2,9.13 70.0,7.93 70.8,7.15 71.7,7.14 72.5,8.27 73.3,10.84 74.2,14.90 75.0,20.00 75.8,25.10 76.7,29.16 77.5,31.73 78.3,32.86 79.2,32.85 80.0,32.07 80.8,30.87 81.7,29.60 82.5,28.56 83.3,27.89 84.2,27.63 85.0,27.70 85.8,27.95 86.7,28.19 87.5,28.28 88.3,28.19 89.2,27.95 90.0,27.70 90.8,27.63 91.7,27.89 92.5,28.56 93.3,29.60 94.2,30.87 95.0,32.07 95.8,32.85 96.7,32.86 97.5,31.73 98.3,29.16 99.2,25.10 100.0,20.00"/></svg></div><div class="kn"><div class="kw"><div class="k" role="slider" tabindex="0" aria-label="Shape" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" style="--v:20"><i></i></div><span class="lb">Shape</span><b>20</b></div><div class="kw"><div class="k" role="slider" tabindex="0" aria-label="Brightness" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" style="--v:60"><i></i></div><span class="lb">Brightness</span><b>60</b></div><div class="kw"><div class="k" role="slider" tabindex="0" aria-label="Level" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" style="--v:80"><i></i></div><span class="lb">Level</span><b>80</b></div></div><div class="pd" role="radiogroup" aria-label="Presets"><button type="button" role="radio" aria-checked="true">A</button><button type="button" role="radio" aria-checked="false" tabindex="-1">B</button><button type="button" role="radio" aria-checked="false" tabindex="-1">C</button><button type="button" role="radio" aria-checked="false" tabindex="-1">D</button></div></article>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 Cards
See all CardsWhere to use it
Inspired by small aluminium synths, this patch card pairs a brushed panel, an OLED-style screen and rubber preset pads. The knobs are accessible sliders drawn with a conic gradient, and moving them reshapes the wave on screen: shape pushes a sine towards a square, brightness adds harmonics, level sets the height. Great for music tools, audio plugins and creative portfolios.
The main color lights the wave, the knob arcs and the preset LEDs, the second color is the panel. Store your own presets in the script as three values each.