Lower third
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 name and a role on a panel with an accent bar at its left edge. Place it low on the left with transform.position.
tsx
<Composition fps={30} width={640} height={360}>
<Track id="main" layout="free">
<Graphic id="g1" kind="lower-third" 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 |
Plus the <Graphic> props every kind takes. More in Lower thirds.