Matrix

The <Matrix> primitive renders a two-dimensional array of values surrounded by square brackets, perfect for linear algebra and systems-of-equations scenes.

0.00s / 1.97s · F0

Props

Prop	Type	Default	Description
`values`	`(number \| string)[][]`	—	2D array of cell values
`x`	`number`	`0`	X position of the matrix
`y`	`number`	`0`	Y position of the matrix
`cellSize`	`number`	`40`	Width and height of each cell in pixels
`color`	`string`	`'currentColor'`	Text color for cell values
`bracketColor`	`string`	`'currentColor'`	Color of the surrounding brackets
`fontSize`	`number`	`16`	Font size of cell values

Code Example

elements: {
  rotation: {
    id: 'rotation',
    type: 'matrix',
    props: {
      type: 'matrix',
      values: [[1, 0, 0], [0, 'cos θ', '-sin θ'], [0, 'sin θ', 'cos θ']],
      x: 250, y: 150, cellSize: 55,
      color: '$foreground', bracketColor: '$accent',
    },
  },
}