<Track>

A row of elements. A sequence track plays its children back to back; a free track (layout="free") places each at its own start.

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

export default function Video() {
  return (
    <Composition fps={30} width={960} height={540}>
      {/* A sequence track: clips play back to back, in order. */}
      <Track id="main">
        <Clip id="a" src="asset:aurora" in={0} out={2} fit="cover" />
        <Clip id="b" src="asset:cells" in={0} out={2} fit="cover" />
      </Track>
      {/* A free track: each element sits at its own start. */}
      <Track id="marks" layout="free">
        <Shape
          id="dot"
          start={0.5}
          duration={3}
          shape="circle"
          width={90}
          height={90}
          fill="#c8402a"
          transform={{ position: { x: 360, y: -170 } }}
        />
      </Track>
    </Composition>
  );
}

Used in: Product launch · Kinetic type · Data story · Logo reveal · 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
layout	"sequence" | "free"	"sequence"
name	string
role	"general" | "captions" | "dialogue" | "music" | "effects" | "ambience"	"general"
locked	boolean	false
hidden	boolean	false
muted	boolean	false
solo	boolean	false
group	string

Children: clip, audio, gap, transition, title, shape, svg, sticker, graphic, adjustment, nested, layer, multicam. All elements