SEEN/frontend/VISUAL_SHOWCASE.md

BRUTALIST CINEMA - VISUAL SHOWCASE

THE TRANSFORMATION

From generic media dashboard to UNFORGETTABLE BRUTALIST CINEMA.

---

HERO MOMENT: THE DASHBOARD

┌─────────────────────────────────────────────────────────────┐
│ ╔═══════════════════════════════════════════════════════╗   │
│ ║                                                       ║   │
│ ║   WELCOME                                             ║   │
│ ║   BACK                                                ║   │
│ ║                                                       ║   │
│ ║   // YOUR MEDIA UNIVERSE                             ║   │
│ ╚═══════════════════════════════════════════════════════╝   │
│                                                             │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐      │
│ │ // CONT  │ │ // RECO  │ │ // WATC  │ │ // GAME  │      │
│ │   12     │ │   87%    │ │   45     │ │   23     │      │
│ │ TITLES   │ │ 8 PICKS  │ │ QUEUED   │ │ TO PLAY  │      │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘      │
│     ▓▓▓▓         ▓▓▓▓         ▓▓▓▓         ▓▓▓▓           │
│                                                             │
│ ╔═══════════════════════════════════════════════════════╗   │
│ ║ CONTINUE                                              ║   │
│ ║ // PICK UP WHERE YOU LEFT OFF                        ║   │
│ ╠═══════════════════════════════════════════════════════╣   │
│ ║                                                       ║   │
│ ║  [CARD]    [CARD]    [CARD]                          ║   │
│ ║                                                       ║   │
│ ╚═══════════════════════════════════════════════════════╝   │
│     ▓▓▓▓         ▓▓▓▓         ▓▓▓▓                         │
└─────────────────────────────────────────────────────────────┘

▓▓▓▓ = HOT PINK SHADOWS

---

SIGNATURE ELEMENTS

1. MASSIVE TYPOGRAPHY

WELCOME BACK
└─ 112px (7rem)
└─ Uppercase
└─ Tracking: -0.04em
└─ Line height: 0.9
└─ Font: Space Grotesk Bold

2. HOT PINK SHADOWS

┌──────────┐
│ BUTTON   │
└──────────┘
    ▓▓▓▓▓▓▓▓▓▓  ← 8px offset, no blur, #FF006E

3. BRUTAL BORDERS

╔═══════════╗  ← 4px solid borders
║  CONTENT  ║
╚═══════════╝

4. SCANLINES

─────────────  ← 2px transparent
█████████████  ← 2px white @ 3% opacity
─────────────
█████████████

---

COLOR PALETTE

BLACK    ████  #000000  Background
WHITE    ████  #FFFFFF  Foreground
PINK     ████  #FF006E  Primary (THE signature)
YELLOW   ████  #FFFF00  Tertiary
RED      ████  #FF0000  Danger
GREEN    ████  #00FF00  Success
GRAY     ████  #8C8C8C  Muted

---

COMPONENT GALLERY

Button States

DEFAULT:
┌──────────┐
│ BUTTON   │
└──────────┘
    ▓▓▓▓▓▓▓▓

HOVER:
  ┌──────────┐
  │ BUTTON   │
  └──────────┘
      ▓▓▓▓▓▓▓▓▓▓

ACTIVE:
┌──────────┐
│ BUTTON   │
└──────────┘
    ▓▓▓▓

Media Card

╔═══════════════════╗
║ ▌                 ║  ← 2px pink accent
║ ▌      M          ║  ← Massive monogram
║ ▌                 ║
║ ▌  [MOVIE] 2024   ║  ← Badges
╠═══════════════════╣  ← 4px border
║ TITLE             ║
║ Description...    ║
║ ─────────────────  ║
║ 2h 15m      8.5★  ║
╚═══════════════════╝
    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

Metric Card

╔═══════════════╗
║ ▬▬▬▬          ║  ← 1px accent line
║               ║
║ // LABEL      ║  ← Mono font
║               ║
║ 87            ║  ← Massive number
║               ║
║ DETAIL    [▣] ║  ← Icon in box
╚═══════════════╝
    ▓▓▓▓▓▓▓▓▓▓▓▓▓

Navigation Item (Active)

╔═══════════════════╗
║ ╔═╗  DASHBOARD    ║
║ ║▣║               ║
║ ╚═╝               ║
╚═══════════════════╝
  ▓▓

---

TYPOGRAPHY HIERARCHY

H1  ████████████████████  112px  WELCOME BACK
H2  ████████████          64px   CONTINUE
H3  ████████              40px   Section Title
P   ████                  14px   Body Text
SM  ███                   12px   Meta Info
XS  ██                    10px   Labels

---

ANIMATION SHOWCASE

Brutal Appear (steps)

Frame 1: ░░░░░░░░  (opacity: 0)
Frame 2: ████████  (opacity: 1)

Brutal Scale (steps)

Frame 1: ▪▪▪▪▪▪  (scale: 0.9)
Frame 2: ████████  (scale: 1.05)
Frame 3: ██████    (scale: 1.0)

Glitch Effect

Normal:  TITLE
Glitch:  T̴I̵T̶L̷E̸
         ▓▓▓▓▓  ← Red/yellow chromatic

---

LAYOUT STRUCTURE

┌─────────────────────────────────────────────────────┐
│ SIDEBAR          │ TOP BAR                          │
│ ═════════        │ ═════════════════════════════════│
│                  │                                   │
│ ╔═══════╗        │ CONTENT AREA                     │
│ ║   S   ║        │                                   │
│ ╚═══════╝        │ ┌──────────┐ ┌──────────┐       │
│ SEEN             │ │  CARD    │ │  CARD    │       │
│                  │ └──────────┘ └──────────┘       │
│ ╔═══════════╗    │     ▓▓▓▓         ▓▓▓▓           │
│ ║ ╔═╗ DASH  ║    │                                   │
│ ╚═══════════╝    │ ╔═══════════════════════════╗   │
│   ▓▓             │ ║ SECTION                   ║   │
│                  │ ╚═══════════════════════════╝   │
│ ╔═══════════╗    │     ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   │
│ ║ ╔═╗ DISC  ║    │                                   │
│ ╚═══════════╝    │                                   │
│                  │                                   │
└─────────────────────────────────────────────────────┘

---

INTERACTION PATTERNS

Hover Transformation

BEFORE:                AFTER:
┌──────────┐          ┌──────────┐
│ ELEMENT  │    →     │ ELEMENT  │
└──────────┘          └──────────┘
    ▓▓▓▓                  ▓▓▓▓▓▓▓▓▓▓

Click Feedback

HOVER:                 ACTIVE:
  ┌──────────┐        ┌──────────┐
  │ BUTTON   │   →    │ BUTTON   │
  └──────────┘        └──────────┘
      ▓▓▓▓▓▓▓▓▓▓          ▓▓▓▓

---

VISUAL EFFECTS

Noise Texture

████████████████████
█▓▒░▓█▒░▓█░▒▓█▓░▒█▓░  ← Fractal noise
████████████████████     8% opacity
█░▒▓█▓░▒█▒░▓█░▒▓█▒░▓     Overlay blend
████████████████████

Scanlines

─────────────────────  ← Transparent
█████████████████████  ← White 3%
─────────────────────
█████████████████████
─────────────────────

Diagonal Stripes

    ▓▓▓▓
  ▓▓▓▓
▓▓▓▓        ← 45deg
  ▓▓▓▓         Pink 5%
    ▓▓▓▓       20px repeat

---

THE UNFORGETTABLE MOMENT

When you open /seen/, you see:

1. PURE BLACK background
2. MASSIVE WHITE typography screaming "WELCOME BACK"
3. HOT PINK SHADOWS on every interactive element
4. HARD EDGES everywhere - zero curves
5. SCANLINES creating retro-tech atmosphere
6. INSTANT ANIMATIONS - no smooth transitions
7. BRUTAL BORDERS - thick, aggressive, unapologetic

This is not a dashboard.

This is BRUTALIST CINEMA.

---

Remember: The goal isn't to be pretty. The goal is to be UNFORGETTABLE.

Mission accomplished. ▓▓▓▓