## Video Trimmer (S—212)

Trim a clip: drag the in and out handles over a frame strip, scrub the playhead, and read the new duration as you go.

- URL: https://sundaeui.dev/components/video-trimmer
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/video-trimmer.json`
- Tags: timeline, trim, editor, video, range, clip

The strip shows frames across the clip. Drag either handle to trim; the region outside dims and the duration updates. Drag inside the selection to slide it.
Play runs the playhead through the trimmed range only. Handles respect a minimum length.

### Usage

```tsx
import { VideoTrimmer } from '@/components/sundae/video-trimmer'

<VideoTrimmer />
```

### Props

- `duration` (`number`, required): Clip length, seconds.
- `defaultRange` (`[number, number]`): Start and end, seconds.
- `min` (`number`, default `1`): Minimum clip length.
- `onChange` (`(range: [number, number]) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Video uploads, voice notes, GIF makers.

### When not to use

- Multi-track editing.

### Accessibility

- Both handles are sliders with time values; arrows nudge by 0.1s, Shift by 1s.
- Play is a toggle button; the duration is announced.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Nudge handle 0.1s
- Shift + ← / →: Nudge 1s
- Space: Play / pause