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().
On this page
const $ = new VideoFlow({ 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 | right | justify / center | Not animatable. |
verticalAlign | top | middle | bottom / middle | Not animatable. |
fontStyle | normal | italic / normal | Not animatable. |
textTransform | none | capitalize | uppercase | lowercase | Not animatable. |
textDecoration | none | underline | overline | line-through | Not animatable. |
direction | ltr | rtl / ltr | Bidirectional text. Not animatable. |
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 | solid | dashed | dotted | double | groove | ridge | inset | outset. |
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] | [sx, sy, sz] / 1 | Animatable. |
rotation | degrees | [rx, ry, rz] / 0 | Animatable. |
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.
const $ = new VideoFlow({ 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 $;fontFamily — the renderer fetches WOFF2 at render time. For local fonts, register them on the VideoFlow instance before adding the layer.