<Graphic>

Deprecated

<Graphic> and its kinds are deprecated and will be removed in a later release; the lint warns on each one. Draw the same thing with <Motion>, <Three> or a <Layer>: the examples show each, and Free code explains them.

A built-in graphic by kind: lower thirds, callouts, counters, progress and more.

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

export default function Video() {
  return (
    <Composition fps={30} width={960} height={540}>
      <Track id="main">
        <Clip id="interview" src="asset:spiral" in={0} out={4} fit="cover" />
      </Track>
      <Track id="graphics">
        <Graphic
          id="who"
          kind="lower-third"
          name="Jane Doe"
          role="Founder, Shed"
          anchor="interview"
          offset={0.4}
          duration={3.2}
        />
      </Track>
    </Composition>
  );
}

Props

Plus the props of its kind: see Graphics.

prop	type	default	required
id	string		yes
start	number (0..∞)
anchor	"start" | string
at	string
offset	number
duration	number | "fill" | "source" |
transform
fit	"contain" | "cover" | "stretch" | "none"
blend	"normal" | "multiply" | "screen" | "overlay" | "darken" | … 13 more
blendOpacity	number (0..1)
enter
exit
style	string
width	number
height	number
kind	"arrow" | "curved-arrow" | "hand-arrow" | "callout" | "speech-bubble" | … 29 more		yes

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