P07

Bajo de cristal

120 BPM
Forma20
Brillo60
Nivel80
HTML + CSSCartes

Preset de synthétiseur à potentiomètres

Une carte de patch avec trois potentiomètres à tourner au glisser ou aux flèches, qui redessinent la forme d'onde aussitôt.

Réglages

16px
1x

Code

<article class="uvq07-syn"><header><span class="id">P07</span><h3>Basse de verre</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="Forme" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" style="--v:20"><i></i></div><span class="lb">Forme</span><b>20</b></div><div class="kw"><div class="k" role="slider" tabindex="0" aria-label="Brillance" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" style="--v:60"><i></i></div><span class="lb">Brillance</span><b>60</b></div><div class="kw"><div class="k" role="slider" tabindex="0" aria-label="Niveau" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" style="--v:80"><i></i></div><span class="lb">Niveau</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 pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Cartes

Voir tout : Cartes

Où l’utiliser

Inspirée des petits synthés en aluminium, cette carte réunit un panneau brossé, un écran façon OLED et des pads en caoutchouc pour les presets. Les potentiomètres sont des curseurs accessibles dessinés avec un dégradé conique, et ils modifient l'onde en direct : la forme pousse le sinus vers le carré, la brillance ajoute des harmoniques, le niveau règle la hauteur. Idéale pour outils musicaux et plugins audio.

La couleur principale allume l'onde, les arcs et les LED des presets, la seconde forme le panneau. Enregistre tes propres presets dans le script, trois valeurs pour chacun.