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
`fadeIn`	`boolean`	`false`	Animate the matrix in on mount

import { Player, FadeIn, Matrix } from '@elucim/core';

<Player width={500} height={300} fps={30} durationInFrames={60}>
  <FadeIn duration={20}>
    <Matrix
      values={[[1, 0, 0], [0, 'cos θ', '-sin θ'], [0, 'sin θ', 'cos θ']]}
      x={250} y={150} cellSize={55}
      color="currentColor" bracketColor="#6c5ce7"
    />
  </FadeIn>
</Player>

{
  "width": 500, "height": 300, "fps": 30, "durationInFrames": 60,
  "children": [
    {
      "type": "matrix",
      "values": [[1, 0, 0], [0, "cos θ", "-sin θ"], [0, "sin θ", "cos θ"]],
      "x": 250, "y": 150, "cellSize": 55,
      "bracketColor": "#6c5ce7",
      "fadeIn": { "duration": 20 }
    }
  ]
}