这套方案适合什么项目
- 品牌登录页、会员入口和实验性产品认证界面
- 需要真实折射效果而不是普通 backdrop blur 的页面
- 希望把视觉实验与标准表单结合的项目
SECTIONS · 转化与表单
液态玻璃登录表单提示词
液态玻璃容易停留在视觉概念。这个方案要求使用 Canvas 做真实折射，同时把登录表单保留为标准 HTML 控件。它适合品牌登录入口或产品概念页，但必须为低性能设备提供普通半透明卡片降级。
实现工具与技术边界
- React 18 与 TypeScript
- Vite 与 Tailwind CSS
- Canvas 像素处理
- Lucide React
DESIGN DECISIONS
真正决定结果的设计取舍
- 01
Canvas 只负责折射，输入控件保持原生语义
- 02
背景视频、折射和表单分层渲染
- 03
低性能设备降级为静态玻璃卡
- 04
错误信息与焦点状态不依赖视觉效果
PUBLIC PROMPT EXCERPT
公开提示词片段
这段内容只公开核心方向，足够判断提示词是否具体。组件清单、细节参数、响应式规则与完整验收要求继续由会员权限保护。
Build a fullscreen sign-in page with real-time liquid glass refraction over a looping video. Use React, TypeScript, Tailwind and Canvas for the effect, but keep inputs, labels, errors and submit behavior as accessible HTML.完成后应该得到什么
结果应是一张视觉鲜明但仍可完成登录的页面。Canvas 失败、视频暂停或减少动效时，表单仍保持完整操作能力。
生成后不要跳过这些检查
- 每个输入框都有显式 label
- 折射关闭后对比度合格
- 错误消息通过文本和 aria-live 呈现
RELATED ASSETS
相关构建方案
围绕同一任务继续比较，不必退回搜索起点。
