Prompt Line Send

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• Line *

  line · string

  The sentence that types itself. It is set at one size and never wraps, so its length is felt as camera travel rather than as type size: 25 to 45 characters reads closest to the reference, and anything past 60 turns the pan into a sprint.

  now: the worlds best motion design agent

• Tracking *

  tracking · number

  Letter spacing in em. The reference measures -0.026, which is what large UI type is usually set at. Positive values open the line up and lengthen the pan with it.

  now: -0.026

• Pan *

  pan · number

  How far the camera travels, as a fraction of the finished line's own width. 0.96 is the reference and leaves the end of the sentence in the left half of the last frame, with the empty space the send button lives in on the right. Below 0.7 the camera stops before the sentence does and the last words type off-screen.

  now: 0.96

• Pull back *

  pullBack · number

  How much wider the frame is by the end. 1.40 is the reference, and because the widening is cut off before it lands the type ends up 27 percent smaller on the last frame of the sentence than on the first, which is what makes the line feel like it is outgrowing the screen. 1 holds the size and reads flatter.

  now: 1.395

• Pointer *

  pointer · boolean

  Draw the mouse pointer on the send button. It is in the reference and it is what makes the press read as a press rather than as a state change.

  now: true

• Flash *

  flash · number

  How hard the whole frame lifts on the single frame the button lights. The reference lifts its ground from 10 to 47 of 255, which is 0.55 here. 0 keeps the light on the button.

  now: 0.55

• Brand *

  brand · string

  Brand token id. The ground, the ink and the send button's lit colour all come from it; a dark brand with a saturated accent is what this was measured on.

  now: signal