Step-Sequencer aus Checkboxen
Acht Pads einer Drum Machine, jedes eine echte Checkbox, mit Lauflicht, das die aktiven Schritte aufblitzen lässt.
Einstellungen
Code
<fieldset class="uvq02-seq"><legend>Kick</legend><div class="pd"><label style="--i:0"><input type="checkbox" aria-label="Schritt 1"><i></i></label><label style="--i:1"><input type="checkbox" aria-label="Schritt 2"><i></i></label><label style="--i:2"><input type="checkbox" aria-label="Schritt 3"><i></i></label><label style="--i:3"><input type="checkbox" aria-label="Schritt 4"><i></i></label><label style="--i:4"><input type="checkbox" aria-label="Schritt 5"><i></i></label><label style="--i:5"><input type="checkbox" aria-label="Schritt 6"><i></i></label><label style="--i:6"><input type="checkbox" aria-label="Schritt 7"><i></i></label><label style="--i:7"><input type="checkbox" aria-label="Schritt 8"><i></i></label></div></fieldset>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Checkboxen
Alle ansehen: CheckboxenWofür du ihn nutzen kannst
Angelehnt an klassische Drum Machines macht dieser Block aus acht Checkboxen die Step-Pads eines Sequencers. Jedes Pad rastet ein und schaltet seine rote LED ein, während ein Lauflicht über die Reihe wandert und die aktiven Schritte im Takt aufblitzen lässt. Tastatur und Screenreader funktionieren, und es passt zu Musik-Apps, Kreativ-Tools und verspielten Einstellungsseiten.
Die Hauptfarbe färbt die ersten vier Pads, die Zweitfarbe die letzten vier, wie die Farbgruppen an echter Hardware. Benenne die Legende pro Instrument um und stapele mehrere Reihen zu einem vollständigen Pattern-Editor.