Envelope

The headless Envelope of @audio-ui/react: its parts, what each renders and owns, and their props.


pnpm add @audio-ui/react

import { Envelope } from "@audio-ui/react/envelope";

Export	Kind	What it is
`Envelope.Breakpoint`	type	A point of the ramp, and how the segment leaving it bends: `curve` from -1 to 1, 0 or unset for a straight line.
`Envelope.Fill`	function	The area under the curve.
`Envelope.Graph`	function	The drawing surface, a 100×100 stretched viewBox: holds `Line` and `Fill`, and a double click on it adds a point.
`Envelope.Line`	function	The envelope curve through the points.
`Envelope.Point`	function	A draggable handle for the point at `index`, positioned with `left`/`bottom` percentages over the `Graph`.
`Envelope.Points`	function	Renders one child per point, in `x` order.
`Envelope.Root`	function	Groups all parts of the breakpoint envelope and owns its points, each normalized to 0…1 on both axes and kept sorted by `x`.
`Envelope.Segment`	function	A handle on the middle of the segment leaving the point at `index`: drag it up or down to bend the segment, so it follows the pointer on the curve's midpoint.
`Envelope.Segments`	function	Renders one child per segment between two points, in `x` order.

Anatomy

Import the primitive and assemble its parts.

import { Envelope } from "@audio-ui/react";

<Envelope.Root>
  <Envelope.Graph>
    <Envelope.Fill />
    <Envelope.Line />
  </Envelope.Graph>
  <Envelope.Segments>
    <Envelope.Segment />
  </Envelope.Segments>
  <Envelope.Points>
    <Envelope.Point />
  </Envelope.Points>
</Envelope.Root>

API reference

Root

Groups all parts of the breakpoint envelope and owns its points, each normalized to 0…1 on both axes and kept sorted by x. Points are dragged and nudged with the keyboard; a double click on the Graph adds one and a double click (or Delete) on a Point removes it, within minPoints / maxPoints. Renders a <div> element.

Props · 11

Data attributes · 2

data-disabled

Present when disabled.

data-dragging

Whether a point is being dragged.

Graph

The drawing surface, a 100×100 stretched viewBox: holds Line and Fill, and a double click on it adds a point. Carries data-blocked briefly when adding is refused at maxPoints. Renders a <svg> element.

Data attributes · 3

data-disabled

Present when disabled.

data-dragging

Whether a point is being dragged.

data-blocked

Briefly true after an add was refused at maxPoints.

Line

The envelope curve through the points. Renders a <polyline> element.

Data attributes · 2

data-disabled

Present when disabled.

data-dragging

Whether a point is being dragged.

Fill

The area under the curve. Renders a <polyline> element.

Data attributes · 2

data-disabled

Present when disabled.

data-dragging

Whether a point is being dragged.

Points

Renders one child per point, in x order.

Props · 1

Point

A draggable handle for the point at index, positioned with left/bottom percentages over the Graph. It is a role="slider" on the point's level (y): give it an aria-label. One point at a time is the tab stop; arrow keys move it (Shift for larger steps), Delete or a double click removes it. Carries data-blocked briefly when removal is refused at minPoints. Renders a <div> element.

Props · 2

Data attributes · 4

data-disabled

Present when disabled.

data-dragging

Whether a point is being dragged.

data-blocked

Briefly true after a removal was refused at minPoints.

data-removable

Whether the point can currently be removed.

Styled

The registry's styled Envelope, its usage and interaction: Envelope.

Meter Plot

Built by Ouest Labs, the source code is available on GitHub.

RSS