按钮
Visual novel choice button with frosted glass effect and subtle hover glow
- 基础骨架
font-sans font-medium rounded-lg transition-all duration-300 ease-in-out- 变体
- 主要、次要、选项、粉色
- 状态
- hover、active、disabled
视觉小说风组件配方
font-sans font-medium rounded-lg transition-all duration-300 ease-in-out bg-[#6366f1] text-white shadow-sm border border-[#6366f1]/20 hover:bg-[#6366f1]/10 hover:border-[#6366f1]/40 hover:shadow-[0_0_15px_#6366f115] active:scale-[0.98]卡片
Semi-transparent dialog panel with frosted glass and optional character nameplate
- 基础骨架
rounded-lg backdrop-blur-md shadow-sm transition-all duration-300 ease-in-out relative- 变体
- 亮色、对话、旁白、场景卡
- 状态
- hover
输入框
Clean input with soft focus glow, designed for character name entry and save screen forms
- 基础骨架
w-full rounded-lg font-sans backdrop-blur-sm focus:outline-none transition-all duration-300 ease-in-out- 变体
- 亮色、暗色、粉色
- 状态
- focus、disabled
对话框
VN-style dialogue box with semi-transparent background
- 基础骨架
rounded-lg backdrop-blur-md p-5 md:p-8 font-sans transition-all duration-300 ease-in-out relative- 变体
- 默认、旁白、内心独白
- 状态
- hover
选项面板
Choice selection panel with hover highlight
- 基础骨架
rounded-lg backdrop-blur-sm px-5 py-3 md:px-6 md:py-4 font-sans cursor-pointer transition-all duration-300 ease-in-out- 变体
- 默认、高亮、锁定
- 状态
- hover
角色槽位
Character portrait frame/slot
- 基础骨架
rounded-lg overflow-hidden transition-all duration-500 ease-in-out relative- 变体
- 默认、活跃、淡出
- 状态
- hover
存档卡片
Save/load slot card with timestamp area
- 基础骨架
rounded-lg backdrop-blur-md p-4 md:p-5 font-sans cursor-pointer transition-all duration-300 ease-in-out relative- 变体
- 默认、空、当前
- 状态
- hover
场景渐变
Scene transition overlay panel
- 基础骨架
inset-0 flex items-center justify-center transition-all duration-700 ease-in-out- 变体
- 黑色渐变、白色渐变、溶解
- 状态
- 静态