Fills

// CSS shorthand
<Rect fill="royalblue" />

// Explicit object
<Rect fill={{ type: 'color', color: '#4f80ff' }} />

// With opacity and blend mode
<Rect fill={{ type: 'color', color: 'white', opacity: 0.6, blend: 'screen' }} />

<Rect fill={{
  type: 'linear-gradient',
  colors: ['#4f80ff', '#e84393'],
  stops: [0, 1],
}} />

// Custom direction — start and end are { x, y } in node-local space
<Rect fill={{
  type: 'linear-gradient',
  colors: ['#4f80ff', 'transparent', '#e84393'],
  stops: [0, 0.5, 1],
  start: { x: -0.5, y: 0.5 },
  end:   { x:  0.5, y: -0.5 },
}} />

<Rect fill={{
  type: 'radial-gradient',
  colors: ['white', 'transparent'],
  radius: 200,
}} />

// Off-center focal point
<Rect fill={{
  type: 'radial-gradient',
  colors: ['#e84393', 'transparent'],
  radius: 300,
  center: { x: -0.3, y: 0.2 },
}} />

<Rect fill={{
  type: 'conic-gradient',
  colors: ['red', 'orange', 'yellow', 'green', 'blue', 'red'],
  stops: [0, 0.2, 0.4, 0.6, 0.8, 1],
}} />

<Rect fill={{
  type: 'image',
  src: './texture.png',
  fit: 'fill',   // 'fill' (cover+crop, default) | 'fit' | 'tile' | 'stretch'
}} />

<Rect fill={[
  { type: 'color', color: '#0f1117' },
  { type: 'linear-gradient', colors: ['#4f80ff33', 'transparent'], stops: [0, 1] },
]} />

import { createScene, Rect, createRef, easeInOut } from '@motion-script/core';

export default createScene(function* (stage) {
  const box = createRef<Rect>();

  stage.add(<Rect ref={box} width={300} height={200} fill="royalblue" />);

  // Animate to a new color
  yield* box().to({ fill: '#e84393' }, 1, easeInOut);

  // Animate opacity of a fill object
  yield* box().to({ fill: { type: 'color', color: 'white', opacity: 0 } }, 0.5);
});