<Clip>

A stretch of a video or image asset, trimmed by seconds, transcript words or camera shots, with speed, fit and transform.

import { Clip, Composition, Track } from "@cutcraft/kit";

export default function Video() {
  return (
    <Composition fps={30} width={960} height={540}>
      <Track id="main">
        {/* Seconds 1 to 3 of the file, then 4 seconds of another played at double speed. */}
        <Clip id="first" src="asset:spiral" in={1} out={3} fit="cover" />
        <Clip id="fast" src="asset:cells" in={0} out={4} speed={2} fit="cover" />
      </Track>
    </Composition>
  );
}

Used in: Product launch · Kinetic type · Data story · An edit · Captions and key points · the walkthrough · Brand spot in any theme · Multicam highlights · Product demo with zoom-ins · Slideshow with motion · Stats with handles · Talking-head cut · Variants from one file · Vertical clip from a podcast

Props

prop	type	default	required
id	string		yes
start	number (0..∞)
anchor	"start" | string
at	string
offset	number
duration	number | "fill" | "source" |
src	string		yes
in	number (0..∞) | string
out	number (0..∞) | string
speed	number (0.1..20)	1
reverse	boolean	false
transform
fit	"contain" | "cover" | "stretch" | "none"
blend	"normal" | "multiply" | "screen" | "overlay" | "darken" | … 13 more
blendOpacity	number (0..1)
volume	number (0..4)
fade
automation
duck
frame

Timed, visual, audible, trims its source, transformable. Children: effect, keyframe, mask, speedKey, freeze. All elements