Motion Prompt #158｜浮动标签 · Floating label

请使用“Floating label”（フローティングラベル），它是“Landing page & web effects, part 2”中的一个名称。
Motion Prompt #158

定义：开始输入时，标签向上浮起。
示例展示：点击字段后，标签缩小并移到上边框，腾出输入区域；当字段为空且失焦时，标签移回内部。
规格：
- 视口511×168，字段300×46、圆角半径8，内含15 px标签“メールアドレス”（邮箱地址）。0.65 s点击字段，3.95 s点击外部失焦。单次4.7 s，在9.4 s包循环内播放两次。
- 聚焦或非空时，标签在0.24 s内以三次ease-out从15缩至11.5 px，并从字段中间移到上边框；左内边距14→10 px，标签背后以白色遮住边框。
- 聚焦时，在0.15 s内以三次ease-out将边框由灰色变橙，宽度1.5→2.2 px，标签也变橙。
- 从1.0 s起每0.075 s输入一个“hello@example.com”字符，从3.2 s起每0.03 s删除一个字符；一旦为空且失焦，标签同样用0.24 s移回内部。
- 文本光标每0.9 s闪烁一次，输入时保持亮起。
何时使用：用于多字段表单，持续显示各字段标签而不额外占空间。

参考实现（Canvas 2D，画面仅由时间决定的函数）：https://showheyohtaki.github.io/motion-prompt/api/v1/en/e/158.txt
共享辅助代码：https://showheyohtaki.github.io/motion-prompt/api/v1/kit/lp2.js
请保持参考实现的形状、时间安排和缓动数值不变，只调整文字、颜色和素材，以适配我正在制作的项目。