shadow

Casts a soft drop shadow behind the element's own shape.

import { Clip, Composition, Effect, Keyframe, Title, Track } from "@cutcraft/kit";

// shadow: Casts a soft drop shadow behind the element's own shape.
export default function Video() {
  return (
    <Composition fps={30} width={640} height={360}>
      <Track id="main">
        <Clip id="backdrop" src="asset:aurora" in={0} out={3} fit="cover" />
      </Track>
      <Track id="text" layout="free">
        <Title id="word" start={0} duration={3} size={140} color="#e8a33d">
          <Effect id="look" type="shadow" params={{ x: 8, y: 8, radius: 3 }}>
            <Keyframe id="k1" param="opacity" at={0.5} value={0} />
            <Keyframe id="k2" param="opacity" at={1.5} value={0.9} easing="ease-in-out" />
          </Effect>
          Shed
        </Title>
      </Track>
    </Composition>
  );
}

Params

Drawn as a CSS filter; no WebGL needed.

param	type	default
x	number	0
y	number	4
radius	number (0..200)	8
color	string	"#000000"
opacity	number (0..1)	0.5

All effects and transitions · Units