按钮
Seigaiha-patterned button with circuit trace glow and shoji-grid geometry
- 基础骨架
font-sans font-semibold tracking-wider border border-[#1e3a5f]/60 transition-all duration-300 ease-in-out- 变体
- 主要、次要、朱红、金继
- 状态
- hover、active、disabled
赛博和风组件配方
font-sans font-semibold tracking-wider border border-[#1e3a5f]/60 transition-all duration-300 ease-in-out bg-[#1e3a5f] text-[#e2e8f0] shadow-[0_0_12px_rgba(30,58,95,0.4)] hover:shadow-[0_0_20px_rgba(56,189,248,0.4)] hover:border-[#38bdf8]/60 active:scale-95卡片
Shoji screen grid frame card with kintsugi gold crack accents and circuit overlays
- 基础骨架
relative bg-[#080814] border border-[#1e3a5f]/30 transition-all duration-300 ease-in-out- 变体
- 默认、靛蓝、朱红、金继
- 状态
- hover
输入框
Wave-pattern underline input with circuit trace focus glow
- 基础骨架
w-full border border-[#1e3a5f]/30 bg-[#080814] text-[#e2e8f0] placeholder:text-[#e2e8f0]/20 font-sans focus:outline-none transition-all duration-300 ease-in-out- 变体
- 默认、电蓝、朱红
- 状态
- focus、disabled
障子屏风
Panel styled like a shoji sliding door with circuit pattern overlay
- 基础骨架
relative bg-[#080814]/95 border border-[#1e3a5f]/30 before:content-[''] before:absolute before:inset-0 before:bg-[linear-gradient(to_right,rgba(30,58,95,0.08)_1px,transparent_1px),linear-gradient(to_bottom,rgba(30,58,95,0.08)_1px,transparent_1px)] before:bg-[size:25%_33.33%] before:pointer-events-none transition-all duration-300 ease-in-out- 变体
- 默认、照明、暗色
- 状态
- hover
青海波横幅
Banner with seigaiha wave pattern border accents
- 基础骨架
relative bg-[#080814] border-2 border-2 py-4 px-6 text-center transition-all duration-300 ease-in-out- 变体
- 默认、金色、青色
- 状态
- hover
折纸卡片
Card with folded paper aesthetic and digital circuit accents
- 基础骨架
relative bg-[#080814] border border-[#1e3a5f]/25 before:content-[''] before:absolute before:top-0 before:right-0 before:w-0 before:h-0 before:border-[20px] before:border-[#1e3a5f]/20 before:border-[20px] before:border-transparent transition-all duration-300 ease-in-out- 变体
- 默认、鹤、莲
- 状态
- hover
鸟居分割线
Horizontal divider styled like a torii gate silhouette
- 基础骨架
relative w-full h-px my-6 before:content-[''] before:absolute before:left-1/2 before:-translate-x-1/2 before:-top-2 before:w-12 before:h-1 before:rounded-full transition-all duration-300 ease-in-out- 变体
- 默认、金色、霓虹
- 状态
- hover
风吕敷容器
Container with wrapping cloth aesthetic and tied corner accents
- 基础骨架
relative bg-[#080814] border border-[#1e3a5f]/20 rounded-sm before:content-[''] before:absolute before:-top-1 before:-right-1 before:w-3 before:h-3 before:rounded-full after:content-[''] after:absolute after:-bottom-1 after:-left-1 after:w-3 after:h-3 after:rounded-full transition-all duration-300 ease-in-out- 变体
- 默认、丝绸、数字
- 状态
- hover