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.

#Countdown

Any text element can become a live countdown to a date: sale ends, product launches, holidays, event starts. Turn on "Live Countdown" in the "Countdown" group and the text starts ticking every second.

The countdown fills in tokens you write anywhere in the text, so the wording is yours, in any language:

• {d} {h} {m} {s} - days, hours, minutes, seconds
• {dd} {hh} {mm} {ss} - the same, zero-padded to two digits

For example, Sale ends in {d} days {hh}:{mm}:{ss} or Only {d} days left. When you turn the countdown on, PaneFlow adds {dd}:{hh}:{mm}:{ss} if the text has no tokens yet and sets the end to a week from now, so you see it working right away. While you edit the text on the canvas, the raw tokens show; everywhere else you see the live value.

• Ends at - the date and time the countdown reaches zero. It is saved with your timezone, so it ends at the same moment for every viewer, wherever they are.
• Largest Unit - by default, the largest token you use takes the rest of the time: without {d}, {hh}:{mm}:{ss} shows total hours (e.g. 52:13:09). Set it to Days (or Hours, Minutes) to count every unit from that one down even when it is not in the text.
• When Ended - what happens once the time is up: show zeros, replace the text with your own (e.g. "Sale ended"), or hide the element.

Boxed digits. For the classic tile-per-unit look, use separate texts with {dd}, {hh}, {mm} and {ss}, each on its own tile with a small label like "DAYS" underneath. Give them all the same end time and set Largest Unit to Days on each, so {hh} shows 0-23 instead of total hours.

Swap content when it ends. Any element in a block with a countdown - an image, a shape, a button, a group or a stack - gets a Show setting in its "Countdown" group: Always, While Counting, or After It Ends. Group the digits, tiles and labels of a boxed clock and set the group to While Counting, then add "The sale is live" to the same block set to After It Ends, and the whole clock is replaced the moment time runs out. Buttons can swap the same way, like "Shop the sale" while counting and "See new arrivals" after. These elements follow the countdown in their own block (the earliest one if there are several). Use Preview in the same group to switch the canvas between the counting and ended states while you edit - the published slideshow always follows the clock.

Countdown digits use fixed-width numerals, so the text does not jitter as it ticks. Fonts with old-style figures (like Cormorant or Playfair) can make digits look uneven - a sans like Inter reads best. Text animations still apply: number-roll counts up to the current time left, then the countdown keeps ticking.

In exported and published slideshows the countdown ticks live in the viewer's browser. Image and PDF exports show the time left at the moment of export, and video exports show it without ticking.

#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

• Element Animations - all animation types and their parameters
• Elements Overview - the controls text shares with everything else
• Core Concepts - how text behaves when blocks are reused across panes