Triangle Pad

triangle-padControls

A ternary control surface with an input contract made for sliders and MIDI CC. Its default apex/base formula uses Y for distance from A and X to balance B against C. An alternate three-corner formula maps 00, 01 and 10 to the corners and 0.5,0.5 to the equal blend. Both report the same post-computed barycentric weights.

Install

Copies the source into your project. Anything it depends on comes with it.

$ npx shadcn add @syntho-ui/triangle-pad

Pulls in

control-theme

First time? Add the registry to your components.json once:

components.json

{
  "registries": {
    "@syntho-ui": "https://engine.syntho.app/r/{name}.json"
  }
}

Usage

Controlled or uncontrolled, whichever suits the surrounding state.

example.tsx

import { TrianglePad } from "@/components/ui/triangle-pad"

<TrianglePad
  value={{ x: controlX, y: controlY }}
  mapping="apex-base"
  onChange={(axes, weights) => {
    setAxes(axes)
    sampler.setMorphWeights(weights)
  }}
  cornerLabels={["Bell", "Hat", "Block"]}
  subdivisions={6}
/>

Props

Prop	Type	Default	Description
value	{ x: number; y: number }	—	Two normalized inputs interpreted by the selected mapping formula.
mapping	"apex-base" \| "corner-centre"	"apex-base"	Choose the original apex/base balance formula or the alternate 00/01/10 corner formula.
onChange	(axes, weights) => void	—	Reports the normalized inputs and their post-computed three-corner weights.
cornerLabels	[string, string, string]	["A", "B", "C"]	Names the top, bottom-left and bottom-right corners.
subdivisions	number	0	Regular lattice subdivisions. 0 hides the lattice.
selectedWeights	[number, number, number] \| null	—	Optional read-only engine position behind the live cursor.

Interaction

Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
Double-click resets to defaultValue.
Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
Proper slider and switch roles with live aria-valuetext, so a screen reader announces the formatted value rather than the raw number.
The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.

All controls Start building