react-composition

# @editframe/react

React wrapper components for Editframe Elements. Provides type-safe React components with hooks for building video compositions.

## Quick Start

```tsx
// Video.tsx
import { Timegroup, Text } from "@editframe/react";

export const Video = () => {
  return (
    <Timegroup
      workbench
      className="w-[1920px] h-[1080px] bg-black"
      mode="sequence"
    >
      <Timegroup mode="fixed" duration="5s" className="absolute w-full h-full">
        <Text duration="5s" className="text-white text-4xl">
          Your video starts here
        </Text>
      </Timegroup>
    </Timegroup>
  );
};

// main.tsx
import ReactDOM from "react-dom/client";
import { TimelineRoot } from "@editframe/react";
import { Video } from "./Video";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <TimelineRoot id="root" component={Video} />
);
```

## Duration Units

`5s` (seconds) | `1000ms` (milliseconds) | `2m` (minutes)

## Getting Started

- [references/getting-started.md](references/getting-started.md) - Create a React project
- [references/timeline-root.md](references/timeline-root.md) - TimelineRoot wrapper (required for rendering)
- [references/configuration.md](references/configuration.md) - Configuration component

## Element Components

- [references/timegroup.md](references/timegroup.md) - Container, sequencing, scenes
- [references/video.md](references/video.md) - Video clips, trimming
- [references/audio.md](references/audio.md) - Audio, volume
- [references/image.md](references/image.md) - Static images
- [references/text.md](references/text.md) - Animated text
- [references/captions.md](references/captions.md) - Subtitles with word highlighting
- [references/waveform.md](references/waveform.md) - Audio visualization
- [references/surface.md](references/surface.md) - Mirror another element

## Advanced Features

- [references/transitions.md](references/transitions.md) - Crossfades, slides, zoom transitions
- [references/css-variables.md