Envelope Overlay

envelope-overlayControls

Draw and edit AHDSR over the take it shapes.

$ pnpm dlx shadcn@latest add @pluginui/core-envelope-overlay
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

sample-view-contextenvelope-displayknob-coreuse-knob-keyboardsvg-markersuse-surface-pointer
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-envelope-overlay.json

Usage

Connect the documented props to your application or host.

example.tsx
import { EnvelopeOverlay } from "@/components/ui/envelope-overlay"

<SampleView durationSeconds={4} peaks={peaks}
  overlay={
    <EnvelopeOverlay value={{ attack, hold, decay, sustain, release }}
      stages={{ attack: { min: 0, max: 10, taper: "exp" }, release: { min: 0.001, max: 20, taper: "exp" } }}
      gateSeconds={2.4} onChange={setEnvelope} onChangeEnd={endEdit} />
  } />
About Envelope Overlay

An editable attack–hold–decay–sustain–release envelope on the sample view's seconds axis. Drag the attack, hold, decay knee (decay and sustain) and release nodes, or the sustain plateau. Every value goes through the parameter descriptor's taper, range and step exactly as its knob does, and arrow keys are the knob's keys, so the overlay and the knobs never disagree. Anything past the end of the take is drawn dashed and dimmed.

Props

PropTypeDefaultDescription
value / onChange / onChangeEndAHDSR / callbacks—Controlled envelope in seconds (sustain 0..1). onChangeEnd fires once per drag or keypress.
stagesPartial<Record<stage, { min, max, step?, taper? }>>—The parameter contracts. Values follow the same taper as the knob path.
gateSecondsnumber—Where note-off is drawn. Defaults to after the decay and at least 60% of the take.
showHoldboolean—Show the hold node; defaults to whether value.hold is defined.
axisSeconds / durationSecondsnumber—Geometry outside a SampleView; inside one the view's axis is used.

Interaction

  • Nodes Drag a node, or focus it: arrows step like the parameter's knob, Shift five steps, PageUp/PageDown, Home/End. The decay knee's Up/Down steps sustain.
  • Take end Segments after the take's end are dimmed; the view rescales after a drag, never during it.
All controlsStart building