Text

The <Text> primitive places a text label at a given position. Control font size, weight, alignment, and color to add labels, titles, annotations, and axis markers to your scenes.

0.00s / 3.97s · F0

Props

Prop	Type	Default	Description
`x`	`number`	`0`	X coordinate of the text anchor point
`y`	`number`	`0`	Y coordinate of the text baseline
`content`	`string` (children)	`''`	The text to display
`fill`	`string`	`'currentColor'`	Text color
`fontSize`	`number`	`16`	Font size in pixels
`fontFamily`	`string`	`'sans-serif'`	Font family
`fontWeight`	`string \| number`	`'normal'`	Font weight (e.g. `'bold'`, `600`)
`textAnchor`	`'start' \| 'middle' \| 'end'`	`'start'`	Horizontal alignment relative to `x`
`opacity`	`number`	`1`	Opacity from 0 to 1

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

<Player width={500} height={300} fps={30} durationInFrames={90}>
  <Write duration={30}>
    <Text x={250} y={80} fill="#6c5ce7" fontSize={32} textAnchor="middle" fontWeight="bold">
      Hello Elucim
    </Text>
  </Write>
  <FadeIn duration={20}>
    <Text x={250} y={140} fill="#a29bfe" fontSize={16} textAnchor="middle">
      Animate concepts. Illuminate understanding.
    </Text>
  </FadeIn>
</Player>

{
  "width": 500, "height": 300, "fps": 30, "durationInFrames": 90,
  "children": [
    {
      "type": "text", "x": 250, "y": 80, "content": "Hello Elucim",
      "fill": "#6c5ce7", "fontSize": 32, "textAnchor": "middle", "fontWeight": "bold",
      "write": { "duration": 30 }
    },
    {
      "type": "text", "x": 250, "y": 140, "content": "Animate concepts. Illuminate understanding.",
      "fill": "#a29bfe", "fontSize": 16, "textAnchor": "middle",
      "fadeIn": { "duration": 20 }
    }
  ]
}