Project variables

Making animations dynamic can be achieved using project variables. These could be used for light/dark themes, changing Node styling or editing text content. Project variables make use of signals - allowing variables to be updated during animations.

Adding variables via the player component can be done by passing a stringified json object to the variables attribute:

<motion-canvas-player
  src="/path/to/project.js"
  variables='{"circleFill":"red"}'
></motion-canvas-player>

They can also be added using makeProject():

export default makeProject({
  scenes: [example],
  variables: {circleFill: 'red'},
});

Accessing the variables inside of a scene is through useScene():

const circleFill = useScene().variables.get('circleFill', 'blue');