LaTeX Element

A LaTeX element renders mathematical formulas and expressions using LaTeX syntax. It supports frame-based content switching with configurable transitions.

LaTeX elements share the common fields from Basic Element and View Element.

LaTeX Properties

Prop	Type	Required	Example	Value Range	Description
type	string	true	-	LaTeX	The type of the element. For LaTeX elements, this is always "LaTeX".
frames	array	true	-	-	An array of LaTeX frames. Each frame defines a LaTeX expression to display at a specific time range.
displayMode	boolean	false	-	-	Whether to render in display mode (block-level, centered) or inline mode.
detail	number	false	-	-	The rendering detail level. Higher values produce smoother curves.
targetWidth	number	false	-	-	The target width for the rendered LaTeX content, in pixels.
color	string	false	-	-	The color of the rendered LaTeX text, in hex format.

Frame Object

Each item in the frames array defines a LaTeX expression and the time range during which it is displayed:

Prop	Type	Required	Example	Value Range	Description
latex	string	true	E = mc^2	-	The LaTeX expression string to render.
start	number	true	-	>= 0	The start time of this frame relative to the element, in seconds.
end	number	true	-	> start	The end time of this frame relative to the element, in seconds. Must be greater than start.
transition	object	false	-	-	Transition effect when switching to this frame.
style	object	false	-	-	Per-frame style overrides for color, displayMode, and targetWidth.

Transition Object:

type (string) - Transition type: 'fade', 'instant', or 'morph'. Default: 'instant'
duration (number) - Duration of the transition in seconds. Default: 0.5

Style Object (per-frame overrides):

color (string) - Override the element-level color for this frame
displayMode (boolean) - Override the display mode for this frame
targetWidth (number) - Override the target width for this frame

Example

Single Frame LaTeX

latexElement.json

 
{
  "id": "latex-001",
  "type": "LaTeX",
  "start": 0,
  "duration": 5,
  "trackIndex": 0,
  "x": 200,
  "y": 300,
  "width": 400,
  "height": 100,
  "anchorX": 200,
  "anchorY": 50,
  "rotation": 0,
  "scaleX": 1,
  "scaleY": 1,
  "alpha": 1,
  "color": "#000000",
  "displayMode": true,
  "targetWidth": 400,
  "frames": [
    {
      "latex": "E = mc^2",
      "start": 0,
      "end": 5
    }
  ]
}

Multi-Frame with Transitions

latexMultiFrame.json

 
{
  "id": "latex-002",
  "type": "LaTeX",
  "start": 0,
  "duration": 10,
  "trackIndex": 0,
  "x": 200,
  "y": 300,
  "width": 500,
  "height": 120,
  "anchorX": 250,
  "anchorY": 60,
  "rotation": 0,
  "scaleX": 1,
  "scaleY": 1,
  "alpha": 1,
  "color": "#1a1a1a",
  "displayMode": true,
  "targetWidth": 500,
  "frames": [
    {
      "latex": "f(x) = ax^2 + bx + c",
      "start": 0,
      "end": 5,
      "transition": {
        "type": "fade",
        "duration": 0.5
      }
    },
    {
      "latex": "x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}",
      "start": 5,
      "end": 10,
      "transition": {
        "type": "morph",
        "duration": 0.8
      }
    }
  ]
}

Notes

LaTeX elements use vector rendering for crisp output at any scale.
The frames array must contain at least one frame with a valid latex string.
Frame time ranges (start to end) should cover the element's duration for continuous display.
The morph transition creates a smooth animation between two LaTeX expressions.

Overview

Element

Effect