Canvas Timeline

React Registry

componentClipInteractionLayer@techsquidtv/canvas-timeline-react

Clip Interaction Layer

A delegated clip hit-test and edit layer for canvas-rendered timeline clips.

Clip preview

A single clip affordance with label, duration, and trim edges.

Open full demo

Installation

pnpm
pnpm add @techsquidtv/canvas-timeline-react
  1. 1

    Install the package.

    The command above adds the React bindings and their package dependencies.

  2. 2

    Import from the React entrypoint.

    @techsquidtv/canvas-timeline-react
  3. 3

    Add the timeline styles.

    Use the full stylesheet with shadcn-compatible tokens, or base.css when your app owns the visual theme.

    Default visuals
    import '@techsquidtv/canvas-timeline-react/styles.css';
    Base geometry
    import '@techsquidtv/canvas-timeline-react/base.css';

Usage

ClipInteractions.tsx
import { Timeline } from '@techsquidtv/canvas-timeline-react';


export function ClipInteractions() {
  return (
    <Timeline.Root className="h-96">
      <Timeline.TrackList>
        <Timeline.Track trackId="video-1" />
      </Timeline.TrackList>
      <Timeline.ClipInteractionLayer />
    </Timeline.Root>
  );
}

Notes

  • Render these components inside a TimelineProvider so they can read the shared TimelineEngine.
  • Import @techsquidtv/canvas-timeline-react/styles.css when your app defines shadcn-compatible semantic tokens, or base.css when supplying your own theme.
  • CSS styles interaction layers; renderer theme styles canvas-painted timeline visuals.
  • Use the theming guide when CSS tokens should drive canvas-painted colors.
  • Timeline.ClipInteractionLayer does not paint clip bodies. Clip fill, label, and selected border are canvas-rendered for performance.
  • The layer renders one active affordance instead of one DOM subtree per clip.
  • Active drag and trim gestures rely on Pointer Events pointer capture, with lostpointercapture cleanup instead of window-level fallback listeners.
  • Per-clip color comes from clip.color data before renderer theme fallback colors.

API Reference

Clip Interaction Layer

A delegated clip hit-test and edit layer for canvas-rendered timeline clips.

Exports

NameReferenceDescription
Timeline.ClipInteractionLayerAPI referenceConstant-DOM layer for selecting, dragging, and trimming canvas-rendered clips.

Props and Inputs

NameTypeDescription
rulerHeightnumberCanvas ruler height used to align hit testing and overlay placement.
trackHeightnumberDefault expanded track height used for hit testing.
edgeThresholdnumberMouse and pen trim-edge hit threshold in pixels.