<Shape>

A vector shape (rectangle, circle, star, polygon, path) with fill, stroke and shadow.

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

export default function Video() {
  return (
    <Composition fps={30} width={960} height={540} background={{ mode: "color", color: "#101421" }}>
      <Track id="shapes" layout="free">
        <Shape
          id="card"
          start={0}
          duration={3}
          shape="rectangle"
          width={360}
          height={200}
          fill="#f3ead6"
          cornerRadius={24}
          transform={{ position: { x: -170, y: 0 } }}
          enter={{ type: "slide-up", duration: 0.6 }}
        />
        <Shape
          id="ring"
          start={0.4}
          duration={2.6}
          shape="circle"
          width={180}
          height={180}
          fill={{ type: "none" }}
          stroke={{ color: "#c8402a", width: 14 }}
          transform={{ position: { x: 220, y: 0 } }}
          enter={{ type: "scale", duration: 0.5 }}
        />
      </Track>
    </Composition>
  );
}

Used in: the walkthrough · Product demo with zoom-ins

Props

prop	type	default	required
id	string		yes
start	number (0..∞)
anchor	"start" | string
at	string
offset	number
duration	number | "fill" | "source" |
transform
fit	"contain" | "cover" | "stretch" | "none"
blend	"normal" | "multiply" | "screen" | "overlay" | "darken" | … 13 more
blendOpacity	number (0..1)
enter
exit
style	string
shape	"rectangle" | "circle" | "ellipse" | "triangle" | "arrow" | … 4 more		yes
width	number
height	number
points	{ x, y }[]
fill	string |
stroke
shadow
shadows	{ color, blur, x, y, spread, inset }[]
cornerRadius	number (0..∞) | string
cornerRadii
starPoints	integer
innerRadius	number (0..1)

Timed, visual, transformable. Children: effect, keyframe, mask. All elements