Triangle Pad

triangle-padControls

Two normalized controls, three post-computed corner weights.

$ pnpm dlx shadcn@latest add @pluginui/core-triangle-pad
Loading interactive preview…

Install

Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.

Pulls in

control-theme
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-triangle-pad.json

Usage

Connect the documented props to your application or host.

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}
/>
About Triangle Pad

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.

Props

PropTypeDefaultDescription
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.
subdivisionsnumber0Regular 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 controlsStart building