Text

Text is the element you will use most. It is plain text (no HTML), styled entirely through the sidebar, and it has a couple of superpowers other elements lack.

#Adding and Editing Text

Select a block and press T, or use the "Add Text" button. Double-click any text on the canvas (or press F2) to edit it in place.

#Text / Font Settings

With a text element selected, the "Text / Font" group in the right sidebar covers all typography:

  • Text Color - solid color or a gradient. It can also inherit the project's default text color, so themed projects restyle in one place.
  • Font Family - any Google Font, searchable in the picker. Choosing "Default" inherits the project font from Project Settings. For brand typefaces, pick "Custom" and use "Upload font file" to bring your own.
  • Font Size - in canvas pixels. On the default 1920x1080 canvas, body text usually sits around 40-80px and headings around 80-140px.
  • Bold / Italic / Underline - also via CTRLB, CTRLI, CTRLU.
  • Line Height - a multiplier of the font size (1 = tight, 1.5 = airy).
  • Letter Spacing - in em, so it tracks the font size. Small values go a long way: 0.1em already reads as spaced-out caps.
  • Text Align left / center / right (ALTL, ALTT, ALTR) and uppercase / lowercase transforms that restyle without retyping.

#How Text Sizing Works

By default a text element auto-sizes: the box is exactly as big as the text, and grows as you type. That is the right behavior for most labels and titles, but two situations need an explicit size, set in the "Layout & Size" group:

  • Alignment needs width. Text Align positions text inside its own box. If the box hugs the text, aligning does nothing visible. Give the element a width (commonly "Relative (%)" at 100, meaning the full block width) and center or right alignment behaves as expected.
  • Wrapping needs width. Paragraphs wrap at the element's width. No width, no wrapping.

In "Relative (%)" mode, width is a percentage of the block, so text sized this way adapts when its block is placed at a different size on another pane. In "Fixed (px)" mode it stays at its pixel width regardless. Height almost never needs to be set - leave it on auto and it follows the content.

#Per-Pane Text Size

Text can have a different width and height on each pane where its block appears (custom code is the only other element that can). A title can span the full hero block on pane one and tuck into a narrow column on pane two, reflowing as part of the transition. All other elements share one size across panes and resize per pane through Scale instead.

Note that font size is shared across panes. To make text visually smaller on one pane, change its Scale in "Position & Transform" on that pane - scale is per-pane, and it animates smoothly during navigation.

#Text Animations

Beyond the general entrance animations, text has its own set, applied in the "Animation" group:

  • typewriter - characters appear one at a time, like live typing
  • letter-fade - each character fades in, staggered across the word
  • letter-scale - each character springs up from nothing with a slight bounce
  • letter-blur - each character sharpens in from a blur, in a random order
  • number-roll - numbers count up from zero to their value, keeping formatting like "10,000+". Made for stat reveals.

The four per-character animations (typewriter, letter-fade, letter-scale, letter-blur) default to a slow, cinematic pace (1.5-2s). For snappy headlines, raise the animation speed well past 1 - 2.5x to 4x lands a title in under a second.

#Pills, Badges, and Boxed Text

A text element is also a box. The "Fill & Border" group gives it a background color, border, and corner radius, and "Layout & Size" adds horizontal and vertical padding. Fill plus padding plus a large radius is the recipe for buttons, badges, and caption pills - no extra shape element needed.

One caveat: the Shadow effect is a box shadow on that rectangle, not a per-letter text shadow. For legibility over busy images, prefer a filled pill or a scrim shape behind the text.

#Next