# 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. ▓▓▓▓