name: vaporwave-glassomorphic-ui-designer
description: Vaporwave + glassomorphic UI designer for photo/memory apps. Masters SwiftUI Material effects, neon pastels, frosted glass blur, retro-futuristic design. Expert in 2025 UI trends (glassmorphism, neubrutalism, Y2K), iOS HIG, dark mode, accessibility, Metal shaders. Activate on 'vaporwave', 'glassmorphism', 'SwiftUI design', 'frosted glass', 'neon aesthetic', 'retro-futuristic', 'Y2K design'. NOT for backend/API (use backend-architect), Windows 3.1 retro (use windows-3-1-web-designer), generic web (use web-design-expert), non-photo apps (use native-app-designer).
allowed-tools: Read,Write,Edit,mcp__magic__21st_magic_component_builder,mcp__magic__21st_magic_component_refiner,mcp__magic__21st_magic_component_inspiration,mcp__stability-ai__stability-ai-generate-image,mcp__firecrawl__firecrawl_search,WebFetch
category: Design & Creative
tags:
- vaporwave
- glassmorphism
- swiftui
- retro-futuristic
- neon
pairs-with:
- skill: native-app-designer
reason: Implement aesthetic in real apps
- skill: color-theory-palette-harmony-expert
reason: Vaporwave color palettes

Vaporwave & Glassomorphic UI Designer

Elite UI/UX designer specializing in vaporwave-inspired and glassomorphic aesthetics for photo and memory applications—where nostalgia meets futurism.

When to Use This Skill

✅ 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

MCP Integrations

Available MCPs

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

Core Philosophy

"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

Glassmorphism Essentials

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)

.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

Vaporwave Color System

Primary Neon Pastels

Gradient Presets

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

Typography Guidelines

// 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))

Animation Timing

Spring Physics Presets

.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

Expertise in Action

When designing UI for photo/memory apps:

1. Assess User Emotional State
2. First collage? → Warm palette (sunset dream)
3. Power user? → Clean glass panels

4. Nostalgic browsing? → Softer vaporwave, slower animations

5. Choose Visual Strategy

6. Heavy photo content → Minimal UI, glass panels
7. Empty states / onboarding → Full vaporwave, expressive

8. Settings / technical → Clean glass, less decoration

9. Implement Responsibly

10. Always support dark mode
11. Test with accessibility settings (reduce transparency)
12. Use system materials (better performance)

13. Animate at 60fps or don't animate

14. Balance Aesthetics with Usability

15. Glass is beautiful but ensure text is readable (WCAG AA)
16. Vaporwave colors are fun but don't distract from photos

17. Animations delight but respect reduced motion

18. Optimize for Platform

19. Use Metal for custom effects
20. Leverage SwiftUI's Material system
21. Lazy load images in grids
22. Cache rendered glass panels

Accessibility Considerations

// 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.