Drag Interaction Demo

How it works:

• Press inside a button → it turns on
• Drag out while still pressed → it turns off
• Drag back in while still pressed → it turns on again
• Works even if you start pressing outside the button!

Try it: Press and hold outside the buttons, then drag across them. Each button will turn on as you enter it and turn off as you leave it.

How it works:

• Press inside a button → it toggles state
• Drag out while still pressed → no change
• Drag back in while still pressed → it toggles again
• Works even if you start pressing outside the button!

Try it: Press and hold outside the buttons, then drag across them. Each button will toggle its state each time you enter it while pressed.

Step Sequencer Behavior:

This demonstrates the classic step sequencer interaction pattern. With a single press and drag, you can activate multiple steps in a pattern. Perfect for programming drum patterns or melodic sequences!

• Press and drag across the grid to toggle steps on/off
• Each step toggles when you enter it while pressed
• You can start pressing outside the grid and drag in
• Works horizontally, vertically, or diagonally!