Back to Motion Prompt examples
Landing page & web effects, part 2 · #14
Floating label
The label floats up when you start typing. Clicking the field shrinks the label and moves it onto the top border, leaving the field free for typing; empty and unfocused, the label moves back inside.
Mouse & input interactionsfloating-labelforminputlabelfocusmaterial-design
Full motion specification
How the movement works
Use it on forms with many fields, to keep each label visible without taking extra space.
- 01A 511 × 168 viewport with a 300 × 46 field (radius 8) holding the label "メールアドレス" (email address, 15 px). The field is clicked at 0.65 s, and a click outside at 3.95 s removes focus. One pass takes 4.7 s (twice per 9.4 s pack cycle).
- 02While focused or not empty, over 0.24 s (cubic ease-out) the label shrinks 15 → 11.5 px and moves from the middle of the field onto the top border (left padding 14 → 10 px); the border is masked in white behind it.
- 03While focused, over 0.15 s (cubic ease-out) the border turns from gray to orange and 1.5 → 2.2 px wide, and the label turns orange.
- 04"hello@example.com" is typed one character per 0.075 s from 1.0 s and deleted one per 0.03 s from 3.2 s. Once empty and unfocused, the label moves back inside over the same 0.24 s.
- 05The text caret blinks every 0.9 s (it stays on while typing).
Prompt
Use floating labels in the form: on focus, shrink each label and move it onto the top border over 0.24 s.