vaporwave-glassomorphic-ui-designer

✅ Use for:

• iOS/Mac photo and memory applications
• Vaporwave-themed UI with neon pastels
• Glassmorphic components (frosted glass cards, panels)
• Retro-futuristic and Y2K revival aesthetics
• Metal shader effects for unique visuals
• Photo app empty states, onboarding, celebrations
• Combining glass effects with vaporwave gradients

❌ Do NOT use for:

• Backend API logic → use backend-architect
• Authentic Windows 3.1 retro → use windows-3-1-web-designer
• Generic web design → use web-design-expert
• Non-photo app native UI → use native-app-designer
• Design system tokens only → use design-system-creator

Available MCPs

| MCP | Purpose |

|-----|---------|

| 21st Century Dev | Component inspiration, building, and refinement |

| Stability AI | Generate design mockups and assets |

| Firecrawl | Research 2025 UI trends and patterns |

| WebFetch | Access Apple HIG documentation |

Design Discovery Workflow

```

1. Query 21st.dev: "glassmorphic modal with blur"
2. Study modern trends (blur levels, gradients, timings)
3. Adapt for vaporwave (neon pastels, scan lines, glow)
4. Build custom: mix patterns, add shaders, signature animations

```

> "Make it feel like a dreamlike memory itself." - Design Principle for Photo Apps

1. Evoke Emotion - Nostalgia, joy, wonder through color and motion
2. Respect Content - Photos are the hero, UI supports not competes
3. Enable Flow - Frictionless creation, experimentation, sharing
4. Delight Constantly - Micro-interactions, surprises, polish
5. Perform Flawlessly - 60fps animations, instant feedback, GPU-optimized

The 2025 Standard for Photo Apps:

• Semi-transparent backgrounds with blur (frosted glass appearance)
• Subtle borders with multi-layer depth
• Photos visible through translucent UI (content-aware)
• Excellent accessibility vs. neumorphism's low contrast

Material Hierarchy (SwiftUI)

```swift

.background(.ultraThinMaterial) // Floating panels (most transparent)

.background(.thinMaterial) // Toolbars

.background(.regularMaterial) // Sheets, modals

.background(.thickMaterial) // Backgrounds

.background(.ultraThickMaterial) // Critical UI (most opaque)

```

Selection criteria: Critical UI = thicker, foreground = thinner, text-heavy = thicker

Primary Neon Pastels

| Color | Hex | Swift |

|-------|-----|-------|

| Pink | #FFAFEF | Color(red: 1.0, green: 0.71, blue: 0.95) |

| Blue | #7DE0FF | Color(red: 0.49, green: 0.87, blue: 1.0) |

| Purple | #B595FF | Color(red: 0.71, green: 0.58, blue: 1.0) |

| Mint | #ABFFE3 | Color(red: 0.67, green: 1.0, blue: 0.89) |

| Hot Pink | #FF3BAE | Color(red: 1.0, green: 0.23, blue: 0.68) |

| Cyan | #00EDFF | Color(red: 0.0, green: 0.93, blue: 1.0) |

Gradient Presets

• Sunset Dream: Pink → Orange → Purple
• Cyber Ocean: Blue → Cyan → Mint
• Twilight Zone: Purple → Blue → Pink
• Pastel Candy: Mint → Blue → Pink (soft)

```swift

// Headers: Bold, wide tracking (80s computer feel)

.font(.system(size: 32, weight: .black, design: .rounded).width(.expanded))

// Body: Clean, readable

.font(.system(size: 16, weight: .medium, design: .rounded))

// Captions: Terminal aesthetic

.font(.system(size: 12, weight: .regular, design: .monospaced))

```

| Category | Duration | Use Case |

|----------|----------|----------|

| Immediate | 0-100ms | Button press, tap feedback |

| Quick | 150-300ms | Navigation, page changes |

| Deliberate | 300-500ms | Onboarding, reveals |

| Dramatic | 500-1000ms | Celebrations, achievements |

Spring Physics Presets

```swift

.spring(response: 0.3, dampingFraction: 0.7) // Snappy

.spring(response: 0.5, dampingFraction: 0.5) // Bouncy

.spring(response: 0.6, dampingFraction: 0.8) // Smooth

.spring(response: 0.8, dampingFraction: 0.6) // Dramatic

```

When designing UI for photo/memory apps:

1. Assess User Emotional State

- First collage? → Warm palette (sunset dream)

- Power user? → Clean glass panels

- Nostalgic browsing? → Softer vaporwave, slower animations

1. Choose Visual Strategy

- Heavy photo content → Minimal UI, glass panels

- Empty states / onboarding → Full vaporwave, expressive

- Settings / technical → Clean glass, less decoration

1. Implement Responsibly

- Always support dark mode

- Test with accessibility settings (reduce transparency)

- Use system materials (better performance)

- Animate at 60fps or don't animate

1. Balance Aesthetics with Usability

- Glass is beautiful but ensure text is readable (WCAG AA)

- Vaporwave colors are fun but don't distract from photos

- Animations delight but respect reduced motion

1. Optimize for Platform

- Use Metal for custom effects

- Leverage SwiftUI's Material system

- Lazy load images in grids

- Cache rendered glass panels

```swift

// Respect reduce transparency preference

@Environment(\.accessibilityReduceTransparency) var reduceTransparency

// Respect reduce motion preference

@Environment(\.accessibilityReduceMotion) var reduceMotion

// Provide solid fallbacks when needed

if reduceTransparency {

RoundedRectangle(cornerRadius: 16)

.fill(Color(.systemBackground).opacity(0.95))

} else {

RoundedRectangle(cornerRadius: 16)

.fill(.ultraThinMaterial)

}

```

---

Technical references for deep dives:

• /references/glassmorphism-patterns.md - SwiftUI glass cards, materials, adaptive components
• /references/vaporwave-aesthetic.md - Color palettes, typography, visual elements, themes
• /references/animations-interactions.md - Button styles, staggered animations, glow effects
• /references/metal-shaders.md - Custom Metal shaders for vaporwave grid, holographic, neon glow

---

Make it dreamlike. Make it delightful. Make it theirs.