Pixel Anime

像素动漫风组件配方

组件变体

relative font-mono font-bold uppercase tracking-wider border-2 border-[#1a1040] shadow-[4px_4px_0px_#1a1040] transition-all duration-150 ease-linear bg-[#4a90d9] text-white hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_#1a1040] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none

button

RPG菜单按钮

Classic JRPG menu button with corner block decorations, pixel-perfect 2px borders, hard offset shadow, and step-based hover translation

基础骨架: relative font-mono font-bold uppercase tracking-wider border-2 border-[#1a1040] shadow-[4px_4px_0px_#1a1040] transition-all duration-150 ease-linear
变体: 主要、次要、金色、绿色
状态: hover、active、disabled

card

RPG对话框

Classic JRPG dialogue window with pixel frame border, inner double-border effect, and four corner block decorations at 8x8px. Referencing Final Fantasy and Dragon Quest menu systems

基础骨架: relative bg-[#1a1040] border-2 border-[#4a90d9] shadow-[4px_4px_0px_#1a1040] transition-all duration-150 ease-linear
变体: 默认、金色、红色、绿色
状态: hover

input

像素输入框

Pixel-art game input with 2px stepped border, monospace font, pixel-aligned focus shadow, and blinking gold caret

基础骨架: w-full bg-[#1a1040] border-2 border-[#4a90d9] text-[#e0e0ff] placeholder:text-[#e0e0ff]/40 placeholder:uppercase font-mono caret-[#ffd93d] focus:outline-none transition-all duration-150 ease-linear
变体: 默认、金色、红色
状态: focus、disabled

spriteFrame

精灵画框

Card with pixel-art border, stepped corners, no border-radius

基础骨架: relative bg-[#1a1040] border-2 border-[#4a90d9] outline outline-2 outline-offset-2 outline-[#4a90d9]/40 shadow-[4px_4px_0px_#1a1040]
变体: 默认、金色、暗色
状态: hover

dialogueBox

对话框

RPG-style dialogue box with pixel border

基础骨架: relative bg-[#1a1040] border-2 border-[#4a90d9] p-4 pb-6 font-mono text-sm text-[#e0e0ff] after:content-[''] after:absolute after:bottom-[-8px] after:left-4 after:w-0 after:h-0 after:border-[8px] after:border-transparent after:border-[8px] after:border-transparent after:border-[8px] after:border-[#4a90d9]
变体: 默认、NPC、系统
状态: 静态

pixelBadge

像素徽章

Small pixel-art badge/tag with hard borders

基础骨架: inline-flex items-center justify-center font-mono font-bold uppercase tracking-wider border-2 bg-[#1a1040] outline outline-1 outline-offset-1 outline-current/30
变体: 蓝色、红色、黄色、绿色
状态: 静态

hpBar

生命值条

HP/health bar with stepped pixel segments

基础骨架: relative h-5 bg-[#1a1040] border-2 border-[#4a90d9] overflow-hidden
变体: 生命、魔力、经验
状态: 静态

menuPanel

菜单面板

RPG menu panel with pixel-art frame

基础骨架: relative bg-[#1a1040] border-2 border-[#4a90d9] shadow-[4px_4px_0px_#1a1040] font-mono text-[#e0e0ff]
变体: 默认、暗色、金色
状态: hover