Text from the page: a greeting

The card says hello to whoever reads it: type a name in the field under the player and the greeting changes, and the hand waves hello. A long name gets smaller to stay on the card, and a very long one is cut with an ellipsis. The sample comp is Welcome card (folder Interactive examples).

Loading the player…

Live · dotlottie-webDownload .lottie

How it works

The greeting is a live text layer whose Source Text is a slot, name. The page writes into it with setTextSlot: a name, an order number, a price, a date. A small state machine, greet, waves the hand: once on load, again when the page fires hello after writing a name, and on a click.

State	Plays	Leaves on
wave	wave (60–119) once: the hand waves three times, turning at the wrist (its anchor point is the bottom middle of the palm); the avatar ring sends out one pulse; the greeting slides up 8 px and fades in, so a new name never just blinks in	done (fired when it finishes)
idle	idle (0–59), looping: a slight sway	—
listener	—	hello → wave, from any state

The idle loop is not only for looks: a slot shows on the next frame the player draws, so a file that stood still would keep the old name on screen until something moved.

Two things have to be true for new words to appear:

1. The text stays text. With Text as shapes (glyphs) on, the export turns every letter into an outline: only the letters of the original line exist in the file, and a new name would come out with missing letters. This comp exports its text as text.
2. The font travels inside the file. dotLottie draws only fonts the file carries (it ignores fonts installed on the viewer's computer and font links). Welcome card carries Geist SemiBold.

In After Effects

1. A text layer with a placeholder (Hi, there!) in the font and size you want, left-justified where the free space is: a longer name then grows into it instead of both ways.
2. Interactive Studio → Slots and themes → Add a token: pick Greeting › Source Text, name it name.
3. Export settings → Text: turn Text as shapes (glyphs) off and set the font to Embed the file. A font whose licence forbids embedding cannot be used this way; pick one that allows it.

On a web page

// the version these pages use
import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.81.0/+esm";

const card = new DotLottie({ canvas: document.querySelector("#welcome"), src: "welcome-card.lottie" });
card.addEventListener("load", () => {
  card.stateMachineLoad("greet");
  card.stateMachineStart();
  greet(currentUser.firstName);
});

// The line must fit 190 px of the card (from x 146 to its padding). Measure it in the file's font -- load Geist on
// the page, or the browser measures a fallback -- and shrink it, down to 16 px; past that, cut it with an ellipsis.
const ctx = document.createElement("canvas").getContext("2d");
const widthAt = (text, size) => { ctx.font = `600 ${size}px Geist`; return ctx.measureText(text).width; };

function greet(name) {
  let text = `Hi, ${name}!`;
  const full = widthAt(text, 30);
  let size = full <= 190 ? 30 : Math.max(16, Math.floor((30 * 190) / full));
  for (let cut = name; widthAt(text, size) > 190 && cut.length > 1; ) {
    cut = cut.slice(0, -1);
    text = `Hi, ${cut.trimEnd()}…!`;
  }
  card.setTextSlot("name", { t: text, s: size }); // s = font size, in the comp's pixels
  card.stateMachineFireEvent("hello");            // wave
}

Only what you pass changes: here the text and the size; the font and colour stay those of the comp. setTextSlot also takes f (font), fc (colour) and j (justification). Limit the input too (maxlength), so nobody pastes a paragraph.

Variations

• A receipt or a ticket: order number, total, date: one text slot each.
• A countdown: the page writes the remaining days every morning.
• A localised banner: the same animation, the headline in the visitor's language; the font must contain those letters.