mirror of
https://github.com/Dvorinka/SEEN.git
synced 2026-06-04 04:23:01 +00:00
Tomas Dvorak
297 lines
11 KiB
Markdown
297 lines
11 KiB
Markdown
# 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. ▓▓▓▓
|