text#

Static or template-driven text with full typographic styling and optional reveal mask. Inherits everything in common fields; the tables below cover what's specific to text.

interface TextElement extends BaseElement {
  type: 'text';
  text?: string;
  text_template?: string;
  spans?: TextSpan[];
  vars?: Record<string, number | string | Keyframe[]>;
  number_format?: 'integer' | 'comma' | 'decimal';

  // Typography
  font_family?: string;
  font_size?: number | string;
  font_weight?: number | string;
  font_style?: 'normal' | 'italic';

  // Color
  fill_color?: string;
  stroke_color?: string;
  stroke_width?: number;

  // Layout
  text_align?: 'left' | 'center' | 'right';
  vertical_align?: 'top' | 'middle' | 'bottom';
  line_height?: number;
  letter_spacing?: number;

  // Background plate
  background_color?: string;
  background_border_radius?: number;

  // Shadow
  shadow_color?: string;
  shadow_x?: number;
  shadow_y?: number;
  shadow_blur?: number;

  // Reveal
  mask?: TextMask;
}

Content#

Animated number example#

{
  "type": "text",
  "text_template": "{{count}} views",
  "number_format": "comma",
  "vars": {
    "count": [
      { "time": 0,   "value": 0 },
      { "time": 1.5, "value": 8447 }
    ]
  }
}

The count animates from 0 to 8,447 across the first 1.5 seconds.

Spans#

Inline-styled runs for mixed styling within one element — a colored word, a highlighted phrase, exact line breaks. A span whose text is exactly "\n" is a hard line break. Each span inherits the element's typography and color unless it overrides them:

interface TextSpan {
  text: string;
  font_family?: string;
  font_size?: number | string;
  font_weight?: number | string;
  font_style?: 'normal' | 'italic';
  fill_color?: string;
  letter_spacing?: number;        // px tracking; inherits the element's
  background_color?: string;      // flat band behind the span
  background?: TextSpanBackground; // stylized band (height, inset, skew, radius)
  nowrap?: boolean;               // never word-wrap inside this span
}

{
  "type": "text",
  "font_size": 64,
  "spans": [
    { "text": "Ship it " },
    { "text": "today", "fill_color": "#FFD400", "nowrap": true },
    { "text": "." }
  ]
}

Typography#

Color#

Layout#

Background plate#

A solid rectangle drawn behind the glyphs. Useful for highlight chips.

Drop shadow#

Reveal mask#

Optional mask field for linear-wipe text reveal. Animatable via keyframe_animations on mask.progress.

interface TextMask {
  type: 'linear-wipe';
  angle?: number;
  progress?: number | Keyframe[];
  softness?: number;
}

Example: animated text reveal#

{
  "type": "text",
  "text": "Hello, Clipkit.",
  "mask": { "type": "linear-wipe", "angle": -45 },
  "keyframe_animations": [
    {
      "property": "mask.progress",
      "keyframes": [
        { "time": 0,   "value": 0, "easing": "ease-out-quart" },
        { "time": 1.2, "value": 1 }
      ]
    }
  ]
}