Anime Spectacle UI

# Anime Spectacle UI

## Philosophy

Anime Spectacle UI treats the interface like a climactic scene rather than a neutral tool. Information arrives as a staged reveal: the hero portrait anchors the composition, progress meters feel charged with momentum, and every status surface carries emotional intensity through glow, framing, and layered ornament. It borrows from gacha result screens, action-game HUDs, idol/game event banners, and modern Japanese pop digital graphics.

### Values

- Cinematic hierarchy led by a featured character or focal illustration
- Emotional amplification through light, rarity cues, and dramatic status framing
- Dense but legible HUD layering that rewards scanning
- Interfaces that feel ceremonial, like activation, summoning, or mission start moments
- Feedback that turns progress into spectacle rather than mere utility

### Anti-Values

- Flat enterprise neutrality
- Invisible framing or borderless cards
- Minimal animation language that removes drama
- Sparse dashboards with no emotional signaling
- Generic monochrome status treatment

### Visual Character

- Ornate double-framed panels with beveled metallic borders and glowing inner seams
- Radial flares, diagonal energy lines, and aurora overlays radiating behind key content
- Hero-led composition with a large portrait block breaking the grid and overlapping UI panels
- Stacked badges, rarity chips, and segmented progress bars clustered around focal actions
- Reveal-stage transitions using lifted cards, shimmer sweeps, and rising light curtains

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#8E6BFF` |
| secondary | `#1FD6FF` |
| accent | `#FF4FB4` |
| background | `#090318` |
| surface | `#130B2F` |
| text | `#F6F2FF` |
| muted | `#B9B2D9` |
| border | `#E8D3FF` |
| error | `#FF5D7A` |
| success | `#7CFFB2` |
| warning | `#FFC95E` |
| info | `#74D7FF` |

### Typography

- **Heading Font**: Orbitron
- **Body Font**: Zen Kaku Gothic New
- **Mono Font**: Share Tech Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.55
- **Letter Spacing**: 0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Share+Tech+Mono&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]

### Radii

- **None**: 0
- **Sm**: 8px
- **Md**: 18px
- **Lg**: 28px
- **Full**: 9999px

### Shadows

- **Sm**: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 20px rgba(31,214,255,0.18)
- **Md**: 0 0 0 1px rgba(255,255,255,0.12), 0 18px 40px rgba(142,107,255,0.28)
- **Lg**: 0 0 50px rgba(255,79,180,0.28), 0 0 120px rgba(31,214,255,0.18)

### Surfaces

- **Treatment**: gradient
- **Card Style**: Midnight violet surfaces with layered translucent overlays, star-noise sheens, and luminous edge fades
- **Bg Pattern**: grid

### Borders

- **Default Width**: 2px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: Decorative metallic borders with double-line framing, inset glow seams, and jewel-like corner accents

### Motion

- **Duration**: 280ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: elastic

## Rules

### Composition

Lead with a dramatic hero zone that overlaps at least two neighboring surfaces. Surround it with framed information clusters that read like tactical overlays, not separate cards. Major actions should sit inside ceremonial button containers and be reinforced by rarity or event labels.

### Hierarchy

Primary hierarchy comes from portrait scale, light intensity, and border ornament before pure text size. Supporting data is tiered through chip density, segmented meters, and small upper labels. Critical states should glow in cyan, magenta, or gold rather than switching to plain text emphasis.

### Density

High density, but organized into legible islands: one spectacle focal point, two to three support panes, and multiple micro-status surfaces nested within them. Empty space is reserved for light effects and diagonals, not neutral whitespace.

### Signature Patterns

- Every major panel uses a double frame: outer metallic stroke plus inner glowing inset border
- Section heads include rarity badges or role chips pinned above the panel edge
- Diagonal energy rails sweep across the layout using pseudo-elements or skewed overlays
- Primary progress indicators are segmented bars with spark flares at the fill edge
- Hero art or portrait blocks overlap surrounding panels with a lifted reveal shadow

## Layout

### Grid

Desktop uses a 12-column stage with a widened center band for the hero composition and narrower tactical side rails. Tablet shifts to a 8-column stacked stage where the hero remains first and support panes wrap beneath. Mobile collapses into a single dramatic scroll with sticky status ribbons and condensed micro-panels.

### Breakpoints

Desktop: 1280px and up; Tablet: 768px to 1279px; Mobile: 0px to 767px. Maintain overlap effects across all breakpoints, but reduce diagonal sweep size and badge count on smaller screens.

### Whitespace

Whitespace is intentionally theatrical: pockets of darkness and glow around the hero focal area, tight spacing inside dense data clusters, and larger gutters only where flare overlays need room to breathe.

## Guidance

### Do

- Use gold, cyan, and magenta highlights to encode rarity, urgency, and excitement
- Let portraits, emblems, or symbolic character graphics break container boundaries
- Frame important actions with layered borders, icon chips, and event labels
- Use segmented bars, counters, and stacked micro-panels for rich HUD readability
- Animate reveals as entrances, ascents, or charge-ups rather than subtle fades

### Don't

- Do not flatten panels into plain rectangles without ornamental seams
- Do not place all emphasis on typography while leaving surfaces inert
- Do not use muted grayscale palettes that suppress emotional intensity
- Do not turn the embodiment into a neutral component inventory
- Do not remove overlap, badges, or energy effects in the name of minimalism