Vaporwave
蒸汽波
Aliases:蒸汽波蒸汽波风格粉紫蓝复古未来霓虹网格地平线80年代商场美学vaporwavesynthwave UIretro mall aesthetic
What is it
Neon pink-cyan-purple, a perspective grid horizon, retro 3D chrome type and palm silhouettes as consumer-nostalgia look. It collages 80s-90s mall culture, early CGI and signal glitch — sweet, hazy, hollowly optimistic.
Design spec
Typography
Chrome-gradient display type plus wide-tracked sans
Color
Pink #FF71CE, cyan #01CDFE, violet #B967FF
Border
1px neon rims, pills and hard corners mixed
Shadow
Multi-layer same-hue neon glows
Spacing
Centered symmetric horizon, elements floating over the grid
Motion
300–400ms neon warm-up and horizon glide; honour prefers-reduced-motion
States
Hover strengthens the layered neon glow; focus shows a visible cyan ring; active lowers saturation; disabled loses glow and opacity; error uses pink neon
Style in action
The same page, ready to useEnter the atrium opens the floor guide. Choose floors for media and food venues; stamp a passport without counting duplicates. Media, Food court and About return to the matching guide; there are no real purchases.
Full-page preview · interact directly
What to look for
- 01Use MALL★95’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
- 02Complete the MALL★95 task, then change inputs or undo and inspect the matching result/state.
- 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.
✓ When to use
- Music, club, streetwear and retro events where style is the mood
- Campaign pages that must signal subculture and haze
- Players, tickets and virtual goods in entertainment contexts
✕ When not to use
- Finance, healthcare and civic UIs that must stay calm and trustworthy
- Long reading and form entry — neon and flicker drain attention
- Accessibility-critical contexts — pink-purple contrast and flicker are risky
Variants
Mall soft
商场软调
Pastel marble, Greek columns and Win95 chrome — sweet and hollow
Neon glitch
霓虹故障
Pink-cyan neon with RGB offset and scanlines, signal unstable
Holographic chrome
全息镀铬
Liquid-metal 3D type with CD-rainbow sheen
Implementation
linear-gradient 粉紫青perspective + rotateX 网格地平线background-clip: text 镀铬字text-shadow 多层霓虹repeating-linear-gradient 扫描线The grid horizon is the signature: a perspective container holding a rotateX(70deg) repeating-linear-gradient plane, faded at the bottom. Chrome type is a multi-stop grey or pink-cyan gradient via background-clip: text with a dark outline. Neon is multi-layer same-hue text-shadow; lock the hue set to pink #FF71CE, cyan #01CDFE, violet #B967FF. Palm and column silhouettes as one or two stickers. Glitch stays brief and rare, respecting prefers-reduced-motion.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Build a complete MALL★95 page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template. Keep MALL★95’s original pink/violet gradient, cyan actions/rims, mountain-silhouette panel and pill feature cards; do not add a mandatory perspective horizon, clipped chrome type, palm/column stickers or glitches. The floor map uses its existing orthogonal repeating-gradient grid, cyan text glow and three-floor hue shifts; passport entries remain in normal document flow. Reuse current preview.tokens: background linear-gradient(180deg,#2B0F54 0%,#5B1E8C 45%,#FF71CE 100%); foreground #FFE9FF; accent #01CDFE / #0A0030; card rgba(255,113,206,.12); border rgba(1,205,254,.55); radius 999px; font Arial Black, Futura, Helvetica Neue, PingFang SC, sans-serif; card shadow 0 0 16px rgba(1,205,254,.45). Use generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows. Full-page operations: Enter the atrium opens the floor guide. Choose floors for media and food venues; stamp a passport without counting duplicates. Media, Food court and About return to the matching guide; there are no real purchases. Share one renderer between static covers, the detail experience and /style-scenes/vaporwave/ (English /en/style-scenes/vaporwave/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts. Interaction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves. Provide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion. Add no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language reviving turn-of-the-millennium digital optimism: liquid chrome, iMac translucent candy plastics, bubble type, sparkle stars, and pink-purple-blue gradients on silver highlights. It mixes naive futurism with clumsy low-poly 3D — sweet, shiny, gloriously unrestrained.
StylesSimilar"High tech, low life" as a visual language: neon cyan and magenta edges cut through a near-black ground, monospace type and terminal glyphs run throughout, and scanlines plus glitch offsets suggest overloaded systems. Light is sliced out of darkness — the screen feels hijacked.
StylesSimilarThe future as imagined by the past: cream-orange-brown warm palettes, chunky rounded casings, orbit lines and planet decals, pixel screens and CRT phosphor — optimistic tech that has aged. Space-age dashboards, vintage appliances and space-race posters fold into one warm nostalgic future.
StylesSimilarThe postmodern anti-functionalist language: squiggles, dots, zigzags and confetti spots in saturated clashing colors with bold black outlines, deliberately breaking grids and order. It embraces the cheap and the festive — happily ugly against modernist good taste.
StylesSimilarA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsAffectsA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAffects