Redesign item inventory UI with modern card layout and SVG icons

[Azuretier]

Summary

Completely redesigned the item inventory panel with a modern glass-morphism card aesthetic, replacing emoji icons with custom SVG graphics and introducing a more prominent, typography-focused layout for item counts and metadata.

Key Changes

UI/UX Redesign

• Card-based layout: Transformed flat item slots into individual glass-morphism cards with accent bars, hover effects, and improved visual hierarchy
• Typography-first design: Large, prominent item count display (1.1rem–1.3rem) with supporting metadata (Japanese name, rarity label)
• Enhanced visual feedback: Added smooth transitions, hover states with subtle lift effect, and rarity-specific color accents
• Improved spacing & sizing: Increased card dimensions (58px → 64px on desktop), better padding, and refined gap spacing for better readability

SVG Icon System

• New ItemIcon component: Replaced all emoji with custom SVG icons for items (stone, iron, crystal, gold, obsidian, star) and weapon cards (stone blade, iron pickaxe, crystal wand, gold hammer, obsidian edge, star cannon)
• Geometric design language: Each icon uses gradients, layered shapes, and subtle details to convey material/rarity
• Scalable & flexible: Icons render at any size with proper aspect ratio and can be reused across UI

Component Updates

• ItemSlots.tsx: Refactored to use new card structure with accent bars, icon wrapper, count display, and rarity labels
• CraftingUI.tsx: Updated to use SVG icons in material lists and recipe cards; improved visual consistency
• FloatingItems.tsx: Integrated new ItemIcon component for floating item animations
• CSS enhancements: Stronger backdrop blur (16px), refined shadows, rarity-specific glow effects, and improved responsive breakpoints

Visual Polish

• Rarity-based accent colors and border treatments (common → legendary)
• Legendary cards now have subtle pulsing animation (3s cycle)
• Improved crafting material and recipe card styling with hover states
• Better mobile responsiveness with scaled-down card sizes and typography

Technical Details

• SVG icons use gradients, polygons, and layered shapes for depth and visual interest
• Rarity system integrated via CSS class selectors (.rarity_common, .rarity_epic, etc.)
• Smooth cubic-bezier transitions (0.25s) for all interactive elements
• Maintained accessibility with proper semantic HTML and title attributes

https://claude.ai/code/session_019RcY26eDSdaWLkfYL43PK3

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
azuretier.net	Ready	Preview, Comment	Feb 7, 2026 5:18pm