LaTeX (KaTeX)

The <LaTeX> primitive renders a LaTeX math expression at a given position using KaTeX. It embeds the rendered HTML inside an SVG <foreignObject>, so it works alongside all other Elucim primitives.

0.00s / 2.97s · F0

Props

Prop	Type	Default	Description
`expression`	`string`	—	LaTeX expression to render (e.g. `"\\frac{1}{2}"`)
`x`	`number`	`0`	X position in pixels
`y`	`number`	`0`	Y position in pixels
`fontSize`	`number`	`20`	Font size in pixels
`color`	`string`	`'currentColor'`	Text color
`width`	`number`	`300`	Width of the foreignObject container
`height`	`number`	`100`	Height of the foreignObject container
`fadeIn`	`boolean`	`false`	Animate in on mount
`align`	`string`	`'center'`	Text alignment (`'left'`, `'center'`, `'right'`)

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

<Player width={500} height={300} fps={30} durationInFrames={60}>
  <FadeIn duration={20}>
    <LaTeX expression="E = mc^2" x={250} y={100} fontSize={36} color="#6c5ce7" />
  </FadeIn>
  <FadeIn duration={20}>
    <LaTeX expression="\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}"
           x={250} y={200} fontSize={28} color="#ff6b6b" />
  </FadeIn>
</Player>

{
  "width": 500, "height": 300, "fps": 30, "durationInFrames": 60,
  "children": [
    {
      "type": "latex",
      "expression": "E = mc^2",
      "x": 250, "y": 100, "fontSize": 36, "color": "#6c5ce7",
      "fadeIn": { "duration": 20 }
    },
    {
      "type": "latex",
      "expression": "\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}",
      "x": 250, "y": 200, "fontSize": 28, "color": "#ff6b6b",
      "fadeIn": { "duration": 20 }
    }
  ]
}