Motion Prompt #159｜实时校验 · Inline validation

请使用“Inline validation”（インラインバリデーション），它是“Landing page & web effects, part 2”中的一个名称。
Motion Prompt #159

定义：输入时显示正确或错误状态。
示例展示：邮箱输入到一半时字段变红并显示“格式无效”；输入完整的瞬间切换为绿色勾和“OK”。
规格：
- 视口511×168，邮箱字段300×44、圆角半径8，0.45 s点击，4.2 s点击外部。从0.75 s起每0.115 s输入“hana@example.com”的一个字符，共16字符；从3.6 s起每0.03 s删除一个字符。单次4.7 s，在9.4 s包循环内播放两次。
- 从第二个字符到最后一个字符输入前均为无效：在0.15 s内以三次ease-out将边框变红#E5383B、填充变浅红#FFF1F1，并在下方显示红色感叹号圆和13 px“形式が正しくありません”（格式无效）。
- 最后一个字符使其有效时，在0.25 s内边框变绿#1E9E5A，右端出现半径11的绿色圆，按GSAP elastic.out(1, 0.3)弹性入场并带白勾，下方出现“OK”。
- 聚焦时，边框在0.15 s内从灰色变深蓝，宽度1.5→2.2 px；一开始删除，提示消息就消失。
何时使用：用于注册或联系表单，在提交之前帮助用户发现错误。

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