Logo Reveal

Logo Reveal → the sting

One idea per logo. Draw it, build it, or wipe it — never all three. The whole reveal runs 800–2500ms and ends on the clean mark, held.

motion-graphics is the build loop; timeline-edit-ops carries the op contract. motion-direction decides which personality the sting belongs to; a logo is usually the one place a piece is allowed its overshoot.

The same three patterns, in code

Draw-on — a path element and el.draw(), which is enter({from: {trimEnd: 0}}):

// fragment
const mark = s.path([["M", -40, 30], ["L", 0, -30], ["L", 40, 30]], { stroke: "#111111" });
mark.draw({ dur: 1.1, ease: "cubic-bezier(0.65,0,0.35,1)" });

Wordmark stagger — by and staggerMs on el.enter(), per character for a short mark:

// fragment
const wordmark = s.text("Northwind", { size: 64, weight: 700 });
wordmark.enter({ from: { scale: 0.9, opacity: 0 }, dur: 0.38, by: "character", staggerMs: 45 });

Lockup row — mark beside wordmark, one flex container (frame-composition covers the container vocabulary in full):

// fragment
s.row([mark, wordmark], { gap: 16, align: "center" });

Reveal the container first if the mark and wordmark should feel like one build, or stagger the row's own children through s.stagger() for a build-on that still keeps its lockup spacing.

Pick one technique

Stroke draw-on

trimStart and trimEnd stroke only a sub-range of a path, 0..1. Drawing is trimEnd running 0 to 1 with the stroke visible and the fill arriving after:

{"op": "add_shape_clip", "shape": {"kind": "path", "d": "M0.1 0.7 L0.3 0.2 L0.5 0.7",
 "stroke": "#111111", "strokeWidthPx": 6, "lineCap": "round",
 "trimStart": 0, "trimEnd": 0}, "durationMs": 2000}

{"op": "animate_clip", "target": "Path", "animations": [
  {"role": "in", "preset": "custom", "durationMs": 1100,
   "easing": "cubic-bezier(0.65,0,0.35,1)",
   "curves": [{"property": "trimEnd", "keyframes": [
     {"t": 0, "value": 0}, {"t": 1, "value": 1}]}]}]}

Both trim channels fold as replace: one animation drives one of them, and two overlapping in time means the later wins and the earlier is discarded, reported as replace_curves_overlap. Draw with trimEnd alone; use trimStart chasing it only for a stroke that draws and erases, and put the two in separate windows.

Stagger several strokes by giving each path clip's animation a delayMs 100–200ms apart, in the order a hand would draw them.

A d the renderer cannot parse is refused at the call rather than stored, and an unknown kind reports unknown_shape_kind and draws nothing — a mark that vanished is usually one of those two.

Mask wipe

For a filled mark, reveal rather than draw. {"role": "in", "preset": "wipe", "durationMs": 700, "params": {"direction": "left", "softness": 0.05}} sweeps a feathered edge across the layer. softness 0 is a hard edge, which reads as graphic; 0.1 reads as light passing over.

A custom curve driving wipeProgress needs a mask on the same animation — {direction, softness} — because a wipe with no edge to run against cannot be inferred. wipeProgress folds as min, so two wipes on one layer keep the tighter one.

Build-on

One clip per part, each on its own overlay track, all parented to one group with add_group. Reveal the container first, then accents, then the wordmark last so the eye lands on the name.

{"op": "animate_clip", "target": "Mark part 2", "animations": [
  {"role": "in", "preset": "pop", "durationMs": 500, "delayMs": 160,
   "params": {"overshoot": 1.12}}]}

Steps of 80–120ms. Then animate the group for anything that moves the whole assembly — one fade out on the group beats three chances for the parts to drift apart. The group's opacity multiplies into each child.

When the parts already have animations, {"op": "stagger_animations", "clip_ids": ["mark-id", "wordmark-id", "tagline-id"], "offset_ms": 100} adds delay in that order without moving their media. Use clip IDs, with at least two, and give every selected clip an animation first. The first keeps its delay. For a repeating field of identical marks, the document's repeater sets copy count, position step, and time step on one clip. Use a repeater for a pattern, and separate clips for parts that need distinct art.

Keep a follower aligned by storing animationLinks on its clip when it should read the mark's position, scale, rotation, or opacity. A link follows the source's authored animation and does not chain through other links. Put the mark and the wordmark in a flex row (layout: {display: "flex", flexDirection: "row", gap, alignItems: "center"} on a group clip, both as its real children via parentId) so the wordmark's position follows the mark's changing box; a backing plate is a third child with flexItem: {position: "absolute", inset: 0} behind the wordmark. These are document fields, so read and write the full document with get_timeline and set_timeline_document. set_clip_params refuses repeater, animationLinks, and layout.

Wordmark

A text clip with a stagger. Per character for a short mark, per word for a lockup with a tagline:

{"role": "in", "preset": "pop", "durationMs": 380,
 "stagger": {"unit": "character", "offsetMs": 45, "from": "start"}}

Work the span out — durationMs + offsetMs × (units − 1) — and compare it against the clip. A span that does not fit is compressed silently, and a compressed wordmark is the reason a reveal "does not look staggered". stagger_compressed is the warning.

Set the family to a bundled one — Inter, Space Grotesk, Bebas Neue, Playfair Display, Lora, JetBrains Mono — or the render and the editor resolve it differently and the lockup's width changes under you.