Text layers

Text layers render a typographic element with full CSS-style control: font, weight, letter-spacing, alignment, background pill, padding, border-radius. Every property is animatable via .animate().

// LiveFlowDemo
const $ = new iLoveVideoEditor({ width: 512, height: 512, fps: 30, backgroundColor: '#0f0f23' });

$.addText(
  {
    text: 'Design.\nAnimate.\nShip.',
    fontSize: 11,
    fontWeight: 800,
    color: '#ffffff',
    fontFamily: 'Inter',
    letterSpacing: '0.02em',
    lineHeight: 1.15,
    position: [0.5, 0.5],
    textAlign: 'center',
    backgroundColor: 'rgba(255, 90, 31, 0.15)',
    padding: '0.3em 0.6em',
    borderRadius: '16px',
  },
  { transitionIn: { transition: 'zoom', duration: '800ms', easing: 'easeOut' } },
);

$.wait('1.5s');
return $;

Properties

Prop	Type / default	Notes
text	string	Plain or multiline. Supports \n. Not animatable.
fontSize	em / 4	Unitless = em (1em = 1% of project width).
fontWeight	100–900 / 600	Only weights the font actually ships are rendered.
fontFamily	string / Noto Sans	Google Fonts resolved automatically. Not animatable.
color	css colour / #FFFFFF	Any CSS colour.
letterSpacing	em / 0em	Animatable.
lineHeight	number / 1	Multiplier of fontSize, or 'XXem' / 'XXpx'.
wordSpacing / textIndent	em / 0	Animatable.
textAlign	`left	center
verticalAlign	`top	middle
fontStyle	`normal	italic/normal`
textTransform	`none	capitalize
textDecoration	`none	underline
direction	`ltr	rtl/ltr`
backgroundColor	css colour / transparent	Pill background; pairs well with padding.
padding	em / 0	Single value or [t,r,b,l].
borderWidth / borderColor / borderStyle	em / colour / enum	borderStyle ∈ `none
borderRadius	em or 'XX%' / 0	Single value or [tl,tr,br,bl].
boxShadow + boxShadowBlur / boxShadowColor / boxShadowOffset / boxShadowSpread	boolean + props	Set boxShadow: true to enable; props animatable.
outlineWidth / outlineStyle / outlineColor / outlineOffset	em + enum	CSS outline. outlineStyle not animatable.
textShadow + textShadowBlur / textShadowColor / textShadowOffset	boolean + props	Set textShadow: true to enable; props animatable.
textStroke + textStrokeWidth / textStrokeColor	boolean + props	Set textStroke: true to enable; props animatable.
position	[x, y] / [0.5, 0.5]	Normalised 0..1 coordinates of the anchor. Accepts [x, y, z].
anchor	[x, y] / [0.5, 0.5]	Pivot inside the layer bbox (for position + rotation + scale).
scale	`number	[sx, sy]
rotation	`degrees	[rx, ry, rz]/0`
perspective	em / 100	3D perspective for child rotations / translations. Animatable.
opacity	0–1 / 1	Animatable.
visible	boolean / true	Hard on/off (no interpolation).
blendMode	16 values / normal	Maps to CSS mix-blend-mode — normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity. Not animatable.
filterBlur / filterBrightness / filterContrast / filterSaturate / filterGrayscale / filterSepia / filterInvert / filterHueRotate	em / multiplier / 0–1 / deg	Per-layer CSS filter chain. All animatable.
effects	LayerEffect[]	Creation-time only — see Effects. Individual params are animatable via dot-path keys.
startTime (setting)	Time / current flow pointer	See Time formats.
sourceDuration (setting)	Time	Rarely needed — prefer the flow pattern (add → $.wait() → .remove()).

Kinetic typography

Give each layer its own transitionIn and space them with $.wait() for the classic "kinetic type" stagger — no manual keyframing required.

// LiveFlowDemo
const $ = new iLoveVideoEditor({ width: 512, height: 512, fps: 30, backgroundColor: '#111' });

$.addText(
  {
    text: 'NOW AVAILABLE',
    fontSize: 4, fontWeight: 700, color: '#22c55e',
    letterSpacing: '0.3em', position: [0.5, 0.4],
  },
  { transitionIn: { transition: 'fade', duration: '600ms' } },
);

$.wait('150ms');

$.addText(
  {
    text: 'Videos\nas code.',
    fontSize: 14, fontWeight: 800, color: '#fff',
    lineHeight: 1.1, textAlign: 'center', position: [0.5, 0.58],
  },
  { transitionIn: { transition: 'slideUp', duration: '900ms', easing: 'easeOut' } },
);

$.wait('2s');
return $;

NOTE

Fonts. Pass any Google Font name as fontFamily — the renderer fetches WOFF2 at render time. For local fonts, register them on the iLoveVideoEditor instance before adding the layer.