Waves background

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.

Three soft waves in the palette's colours across the bottom of the frame, rising to level (a fraction of the height) and drifting at speed. Animated: it changes over its whole duration.

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

Props

prop	type	default
background	string	"$background"
colors	string[]	["$primary","$secondary","$accent"]
level	number (0..1)	0.45
speed	number (0..10)	0.3

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