LowerThird

A name and a role in the lower third, on a card or beside an accent bar.

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

// LowerThird: a name and a role, on a card that slides up, timed like any title.
export default function Video() {
  return (
    <Composition fps={30} width={1920} height={1080}>
      <Track id="main">
        <Clip id="shot" src="asset:coffeeWide" in={4} out={7} fit="cover" />
      </Track>
      <Track id="over" layout="free">
        <LowerThird id="lt" start={0.3} duration={2.7} name="Maya Chen" role="Head roaster, Shed Coffee" />
      </Track>
    </Composition>
  );
}

The coffee footage is Pixabay videos 209419 and 209424, under the Pixabay Content License.

Props

Besides the timing props (start, anchor, at, offset, duration):

param	type	default
id	string
name	string
role	string
variant	"card" | "bar"	"card"
x	number	-560
y	number	330
width	number	640
accent	string	"$primary"

All components