# NyumatFlix Glass Morphism Design Pattern

## Source Reference
Adapted clean-room from [NyumatFlix](https://github.com/Nyumat/NyumatFlix) (Next.js 15, MIT license) — a premium streaming platform with shadcn/ui components, Tailwind CSS, and glass morphism design language.

## Color Tokens (Applied to NexStream Android TV)

These semi-transparent white-on-black tokens create the "frosted glass" look without needing backdrop blur (which Compose for TV doesn't support natively):

```kotlin
// In NexColors.kt:
val GlassBg     = Color(0x1AFFFFFF)  // white 10% on black — glass card backgrounds
val GlassBorder = Color(0x4DFFFFFF)  // white 30% — glass card borders
val GlassHover  = Color(0x33FFFFFF)  // white 20% — glass hover/focus state
val GlowPrimary = Color(0x332B9FEE)  // NyumatFlix blue glow (~20%)
val GlowFuchsia = Color(0x33D247BF)  // NyumatFlix fuchsia glow (~20%)
val GlowBorder  = Color(0x662B9FEE)  // 40% blue border glow
```

## Application Patterns

### 1. Glass Cards
Replace solid `SurfaceHigh`/`SurfaceTop` backgrounds with `GlassBg`:
```kotlin
// BEFORE (opaque):
colors = ClickableSurfaceDefaults.colors(
    containerColor = NexColors.SurfaceHigh,
    focusedContainerColor = NexColors.SurfaceTop,
)
// AFTER (glass):
colors = ClickableSurfaceDefaults.colors(
    containerColor = NexColors.GlassBg,
    focusedContainerColor = NexColors.GlassHover,
)
border = ClickableSurfaceDefaults.border(
    focusedBorder = Border(BorderStroke(1.dp, NexColors.Accent)),
)
```

### 2. Glass Buttons
Secondary buttons get glass backgrounds with subtle borders:
```kotlin
ButtonDefaults.colors(
    containerColor = NexColors.GlassBg,
    contentColor = NexColors.TextPrimary,
    focusedContainerColor = NexColors.GlassHover,
)
border = ButtonDefaults.border(
    focusedBorder = Border(BorderStroke(1.dp, NexColors.GlassBorder)),
)
```

### 3. Glass Genre Pills
Genre tags in hero/detail screens:
```kotlin
Box(
    modifier = Modifier
        .background(NexColors.GlassBg, RoundedCornerShape(12.dp))
        .border(1.dp, NexColors.GlassBorder, RoundedCornerShape(12.dp))
        .padding(horizontal = 12.dp, vertical = 4.dp),
) {
    Text(text = genre, color = NexColors.TextSecondary, fontSize = 13.sp)
}
```

### 4. Glass Rating Badge
Gold rating in a glass pill:
```kotlin
Box(
    modifier = Modifier
        .background(NexColors.GlassBg, RoundedCornerShape(16.dp))
        .border(1.dp, NexColors.Gold.copy(alpha = 0.4f), RoundedCornerShape(16.dp))
        .padding(horizontal = 12.dp, vertical = 6.dp),
) {
    Row {
        Text("★", color = NexColors.Gold)
        Text(rating, color = NexColors.Gold, fontWeight = Bold)
    }
}
```

### 5. Glass Top Bar / Nav Areas
```kotlin
.background(
    Brush.verticalGradient(
        colors = listOf(NexColors.GlassBg, NexColors.Background),
    ),
)
```

## Visual Philosophy
- **Background stays OLED black** (`#050505`) — the canvas is dark, not gray
- **Cards float** on the dark canvas with 10% white — they feel like frosted glass, not solid surfaces
- **Borders are whispers** — 30% white, 1dp. Never shout.
- **Accent red** (`#E50914`) is the only saturated color — used sparingly for focus, primary actions, and branding
- **Text** uses the full white-to-gray hierarchy (Primary/Secondary/Tertiary/Disabled) — never tinted by glass layers
- **The content is the star** — glass effects add depth without competing with poster artwork

## Pitfall: Don't Over-Glass
Everything shouldn't be glass. Reserve GlassBg for:
- Cards that contain interactive content (onboarding, settings, service setup)
- Secondary/tertiary action buttons
- Genre/badge pills
- Rating overlays on posters

Keep these solid (Surface/SurfaceHigh):
- NavRail background (needs visual weight, not float)
- Primary action buttons (Play, Get Started — should be Accent red)
- Text input fields
- Dialogs/sheets (use SurfaceTop)