<Layer>

Free code in the frame: any React, CSS, canvas or WebGL, placed on the timeline like any overlay; useT() is its time.

import { Clip, Composition, Layer, Track, useT } 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="layers">
        <Layer id="clock" anchor="shot" duration={3}>
          <Elapsed />
        </Layer>
      </Track>
    </Composition>
  );
}

/** Any React inside a layer, drawn each frame; `useT()` is the layer's time in seconds. */
function Elapsed() {
  const t = useT();
  return (
    <div
      style={{
        display: "flex",
        width: "100%",
        height: "100%",
        alignItems: "center",
        justifyContent: "center",
        color: "#ffffff",
        fontSize: 120,
        fontWeight: 700,
      }}
    >
      {t.toFixed(1)} s
    </div>
  );
}

Used in: Kinetic type · Data story · the walkthrough · Brand spot in any theme · Stats with handles

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

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