Lower third, split

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.

The name on an accent block and the role on a panel below it, offset to the right.

<Composition fps={30} width={640} height={360}>
  <Track id="main" layout="free">
    <Graphic
      id="g1"
      kind="lower-third-split"
      start={0}
      duration={3}
    />
  </Track>
</Composition>

Props

prop	type	default
name	string	"Jane Doe"
role	string	"Founder, Shed"
accent	string	"$primary"
fill	string	"$surface"
color	string	"$text"
muted	string	"$muted"
font	string	"$heading"
roleFont	string	"$body"
size	number (0..400)	44
weight	integer	700
onAccent	string	"$onPrimary"

Plus the <Graphic> props every kind takes. More in Lower thirds.