Videos from code. Rendered at scale.

import { composition, tween, spring, Easing } from '@cuitty/video';
import { render } from '@cuitty/video-render';

const video = composition({
  id: 'product-demo',
  width: 1920, height: 1080,
  fps: 30, durationInFrames: 300,
});

video.layer('background', (ctx) => `
  <div style="width:${ctx.width}px;height:${ctx.height}px;
    background:linear-gradient(135deg,#667eea,#764ba2);">
  </div>
`);

video.layer('title').clip({
  startFrame: 0,
  endFrame: 150,
  render: (ctx) => {
    const opacity = tween(ctx.frame, [0, 30], [0, 1], { clamp: true });
    const y = tween(ctx.frame, [0, 30], [40, 0], {
      clamp: true,
      easing: Easing.out(Easing.cubic),
    });
    return `<h1 style="opacity:${opacity};
      transform:translateY(${y}px);">
      Welcome to Cuitty
    </h1>`;
  },
});

await render({
  composition: video,
  outputPath: './output/demo.mp4',
  codec: 'h264',
  crf: 18,
});