<Three>

A three.js scene on the timeline: plain three.js in setup, or React Three Fiber children, on the video's clock.

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

export default function Video() {
  return (
    <Composition fps={30} width={960} height={540}>
      <Track id="main">
        <Clip id="shot" src="asset:aurora" in={0} out={3} fit="cover" />
      </Track>
      <Track id="scene" layout="free">
        {/* Plain three.js in setup; the function it returns runs on every frame with the layer's time. */}
        <Three
          id="cube"
          anchor="shot"
          duration={3}
          camera={{ position: [0, 0, 5], fov: 40 }}
          setup={({ scene, THREE }) => {
            const cube = new THREE.Mesh(new THREE.BoxGeometry(1.6, 1.6, 1.6), new THREE.MeshNormalMaterial());
            scene.add(cube);
            return ({ time }) => {
              cube.rotation.set(time * 0.6, time, 0);
            };
          }}
        />
      </Track>
    </Composition>
  );
}

The player draws it once the host calls installFreeCodeLibraries() (Free code); the export draws it the same way, in headless Chrome (Exporting).

Used in: Product launch · Logo reveal · Brand spot in any theme

Props

prop	type	default	required
id	string		yes
start	number (0..∞)
anchor	"start" | string
at	string
offset	number
duration	number | "fill" | "source" |
enter
exit
transform
blend	"normal" | "multiply" | "screen" | "overlay" | "darken" | … 13 more
camera
background	string
setup	any

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