Media Components
Free React media components: clip trimmer, contact sheet, synced transcript, focal point picker and photo straightening, built with Tailwind CSS and Motion.
Components for working with video, audio and images: trimming clips, picking frames from a contact sheet, following a transcript as it plays, and cropping or straightening pictures. Each one is a React component built with Tailwind CSS and Motion.
- MD-01Clip TrimmerNewA video trim timeline with a filmstrip, handles that snap to whole seconds and a playhead that loops the kept range.
- MD-02Synced TranscriptNewA transcript that follows the spoken word, lets you click any word to jump there, and waits when you scroll away.
- MD-03Focal Point PickerNewSet where a photo's subject is and see every crop follow it live. Hover a crop to see what it cuts.
- MD-04Photo StraightenNewLevel a crooked photo on a ruler you drag or flick. The crop grows to hide the corners, and a grid shows while you adjust.
- MD-05Contact SheetNewPick from a shoot the way photographers do. Circle a frame in china marker, click again to strike it, and look through a loupe at the detail first.
Image Generation CardPRO
An AI image panel where Generate resolves the picture from coarse pixel blocks to sharp with a step counter, then four variations land. Part of Kokonut UI Pro.
Clip Trimmer
A video trim timeline with a filmstrip, handles that snap to whole seconds and a playhead that loops the kept range.
