Region

AnatomyCopy Anchor Link

import { Region, Timeline, Waveform } from '@addstack/daw-ui/react';

<Timeline.Root start={0} end={30}>
  <div className="relative h-16">
    <Region.Root at={4} duration={8} offset={1.5}>
      <Region.Header>
        <Region.Label>{clip.name}</Region.Label>
      </Region.Header>
      <Region.Content>
        <Waveform.Root peaks={clip.peaks} className="h-full" />
      </Region.Content>
    </Region.Root>
  </div>
</Timeline.Root>

A region is what lies on a timeline for a time: a clip or a pattern (the same thing in Logic, Ableton and FL Studio), a part of a song, a loop range, a take being recorded. Its header holds its name and your controls, such as a menu; its content, a waveform or notes, is yours to put inside, or nothing, as for the parts of the song in the demo.

The Arrangement block composes regions into tracks of clips.

PlacementCopy Anchor Link

A region starts at seconds on the timeline, lasts duration, and shows its content from offset seconds into it, like a clip whose start was trimmed. The content follows the region: a waveform in it shows the audio from offset for duration.

• In time, it follows the axis of the Timeline.Root around it, placed in CSS from the timeline's variables: scrolling and zooming move it without work.
• In height, it fills the box it is placed in. Render it in the row it belongs to, an element with position: relative: the region does not know what the row means, a track of an arrangement or anything else.

A new placement, from props or from read, rewrites the region's position and width without rendering what is inside, and a waveform in it draws nothing it has drawn already: moving or trimming a region only places its tiles again. For a placement that changes on its own, pass read, called once per animation frame; a take being recorded grows like this:

<Region.Root at={recordStart} read={() => ({ duration: take.duration })}>
  <Waveform.Root peaks={take} className="h-full" />
</Region.Root>

Moving and trimmingCopy Anchor Link

A region shows where its props put it, so moving and trimming it is your application changing at, duration and offset. The demo does it with a few lines of pointer handling: a drag on the region moves it, a drag on an edge trims it, snapped to beats, and arrows do the same from the keyboard. Trimming the start moves offset with at, so the audio stays where it is in time.

The waveform inside draws nothing again as the region moves or is trimmed: it only places its tiles again. The edges are plain elements of the page, at the sides of the region; style them as a bar or as a zone that only changes the cursor.

AccessibilityCopy Anchor Link

A region is a group named by its Region.Label. Name the row it is in too, for example with role="group" and aria-label in your application's language.

API referenceCopy Anchor Link

RootCopy Anchor Link

Something that lasts on the timeline. Renders a <div> with role="group", placed and sized in CSS from at and duration, filling the height of its container.

HeaderCopy Anchor Link

The top of a region, for its label and your controls. Renders a <div>.

LabelCopy Anchor Link

The name of a region, which names it for assistive technology. Renders a <span>.

ContentCopy Anchor Link

Where the content goes: a waveform, notes. Renders a <div> with position: relative.