compreel
EN中文

Motion vocabulary · Text input typing

Search with typo and fix

A search pill: the query is typed with one typo that is noticed and fixed, suggestions follow, the first one is picked.

Live loop · 7 s · 1920×1080 at 24 fps

Parameters

ParameterTypeWhat it does
text (required)stringwhat is typed (or pasted)
placeholderstringgrey text in the empty field
resultstring | string[]what flips in after the submit: a title line, then up to 3 lines
resultSrc"/assets/<screen>.jpg"a real screen as the result card instead of lines
cpsnumber
Default: 15		characters per second (a person types 8-20)
mistype{at, wrong} | falsea typo and its fix at char index `at`
x / y / widthpxfield centre x, top y, width
ease{"<move>": ease}retune any named move (see the entry's moves): a preset name ("out-expo"), a cubic-bezier [x1, y1, x2, y2], {spring: [hz, damping]} or {trapezoid: [accel, decel]}. A wrong move name or curve throws, it never falls back. A move measured from a reference clip (the replica workbench's measure/*.json, frame-keyed) becomes a curve without conversion: MV.fitEase(doc, "x", {from: 133, to: 142}) or `motion-fit <file> --measure x --from 133 --to 142 --ease`
brandhex
Default: #6B5BFF		the site's brand colour; the component derives its accent (>= 3:1 on the stage), surfaces and ink from it
stage"dark" | "light"
Default: "dark"		the stage the component sits on
displayfont stem
Default: "Inter-Bold"		headline stem; name it in the call so the runtime loads it
bodyfont stem
Default: "Inter-Regular"		UI / body stem; name it in the call so the runtime loads it
start_msms
Default: 300		when the component starts, ms into the shot
backgroundboolean
Default: false		draw the stage background (off: transparent over the shot's own stage)
place{x, y, w, h, z?}the component's place in the shot's layout: it fits its 1920x1080 composition into this stage rect (centred, aspect kept); z orders components front to back. Default: the whole stage

Moves and their curves

Every move is eased on its own. Retune one with ease: { "<move>": <curve> }, a curve name or cubic-bezier handles.

MoveCurveWhat it does
enter.release{"spring":[2.5,1]}the field easing back after the Enter press
drop.openout-cubicthe dropdown opening under the field
drop.closein-quadthe dropdown closing after Enter
row.highlightout-cubicthe first suggestion lighting up
submit.riseout-quintafter the submit, the field rising out of the way
card.flip{"spring":[1.33,0.88]}each result card flipping down into place (110 ms apart)

This demo

variant"search"
text"launch film template"
suggestions["launch film template","launch film for apps","launch film music"]
result["Launch film templates","Pick a look. Add your screens."]
brand#2F9E6E
stagedark
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.typeInput(el, {"variant":"search","text":"launch film template","suggestions":["launch film template","launch film for apps","launch film music"],"result":["Launch film templates","Pick a look. Add your screens."],"brand":"#2F9E6E","stage":"dark","display":"Inter-Bold","body":"Inter-Regular"}));

When to use it in a launch film

Search-first products, or a hook that shows the viewer's own question being asked.

Why it works

One honest typo makes the hand feel human and holds the eye on the field a beat longer.

Do not combine with

  • another typing component on screen at the same time (one caret per frame)
  • more than one typo (a second one reads as a joke)

Job in the film

  • Hook
  • Feature

Natural length

4.0–7.0 s

Make a film with these moves in LaunchReel

More text input typing

All motion components →