<Motion>

Children animated by a Motion sequence on the video's clock.

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

export default function Video() {
  return (
    <Composition fps={30} width={960} height={540}>
      <Track id="main">
        <Clip id="shot" src="asset:aurora" in={0} out={3} fit="cover" />
      </Track>
      <Track id="text" layout="free">
        {/* A Motion sequence over the tag's children: each step names a selector inside it. */}
        <Motion
          id="headline"
          anchor="shot"
          duration={3}
          sequence={[
            ["h1", { opacity: [0, 1], y: [40, 0] }, { duration: 0.6, ease: "easeOut" }],
            [".rule", { scaleX: [0, 1] }, { at: 0.3, duration: 0.8 }],
          ]}
        >
          <h1
            style={{
              position: "absolute",
              left: 0,
              right: 0,
              top: 200,
              margin: 0,
              textAlign: "center",
              color: "#ffffff",
              font: "700 84px Inter, sans-serif",
            }}
          >
            Launch
          </h1>
          <div
            className="rule"
            style={{
              position: "absolute",
              left: 330,
              width: 300,
              top: 310,
              height: 6,
              background: "#e8a33d",
              transformOrigin: "left",
            }}
          />
        </Motion>
      </Track>
    </Composition>
  );
}

The player draws it once the host calls installFreeCodeLibraries() (Free code); the export draws it the same way, in headless Chrome (Exporting).

Used in: Product launch · Kinetic type · Data story · Logo reveal · An edit · Brand spot in any theme

Props

prop	type	default	required
id	string		yes
start	number (0..∞)
anchor	"start" | string
at	string
offset	number
duration	number | "fill" | "source" |
enter
exit
transform
blend	"normal" | "multiply" | "screen" | "overlay" | "darken" | … 13 more
sequence	[string, object] | [string, object, object][]	[]

Timed, visual, transformable. Children: effect, keyframe. All elements