| license | Apache-2.0 |
| 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.
Decision Points
Visual Effect Decision Tree
Photo content density assessment:
├── High photo density (grid, carousel)
│ ├── Use .ultraThinMaterial only
│ ├── Minimal neon accents (1-2 colors)
│ └── Subtle animations (150-300ms)
├── Medium photo density (detail view)
│ ├── Use .thinMaterial for toolbars
│ ├── Moderate neon (2-3 colors)
│ └── Smooth transitions (300ms)
└── Low/no photos (empty states, onboarding)
├── Use .regularMaterial freely
├── Full vaporwave palette (4+ colors)
└── Dramatic animations (500-1000ms)
User context assessment:
├── First-time user
│ ├── Warm pastels (sunset gradient)
│ ├── Bouncy springs (0.5 response, 0.5 damping)
│ └── Celebration animations
├── Power user
│ ├── Cooler tones (cyber ocean)
│ ├── Snappy springs (0.3 response, 0.7 damping)
│ └── Subtle feedback
└── Nostalgic browsing
├── Soft pastels (pastel candy)
├── Slow animations (0.8 response, 0.6 damping)
└── Dreamy transitions
Accessibility compliance:
├── If reduceTransparency enabled
│ ├── Replace materials with solid colors
│ └── Maintain 4.5:1 contrast ratio
├── If reduceMotion enabled
│ ├── Replace springs with linear
│ └── Duration < 200ms
└── If prefersCrossFadeTransitions
├── Use opacity changes only
└── No transform animations
Failure Modes
1. Over-Blur Syndrome
Symptoms: UI feels muddy, text unreadable, photos lose impact
Detection: If blur radius > 20pt OR contrast ratio < 3:1
Fix: Reduce blur by 25%, add subtle border, use thicker material
2. Neon Overload
Symptoms: Eye strain, competing with photo content, accessibility failures
Detection: If > 3 neon colors visible simultaneously OR brightness > 80%
Fix: Limit to 2 accent colors max, reduce saturation by 20%, use gradients sparingly
3. Spring Bounce Chaos
Symptoms: Motion sickness, sluggish feel, conflicting animations
Detection: If spring response > 0.8 OR multiple overlapping animations
Fix: Standardize to 3 spring presets, stagger animation starts by 50ms
4. Material Hierarchy Collapse
Symptoms: UI elements blend together, no visual depth, poor usability
Detection: If adjacent elements use same material thickness
Fix: Follow strict hierarchy: critical=thick, floating=ultraThin, ensure 2-step difference
5. Performance Lag Trap
Symptoms: Dropped frames, thermal throttling, battery drain
If frame rate < 55fps OR custom shaders without LOD
Use system materials first, cache complex renders, implement detail reduction
