Agence WagnerAgence Wagner
FRENDEELS
Zurück zu den Designs
FuturisteMaximalisteColoréGlass
Vorschau

Y3K Hyperfuturism Design Reference

Overview

Y3K Hyperfuturism is a speculative design aesthetic that imagines the visual language of the year 3000 -- an era so far beyond our own that technology has become indistinguishable from alien architecture. Unlike Y2K, which reflected the lived optimism of the early internet age, Y3K is untethered from any real historical moment. It is pure speculation: post-human megacities, sentient infrastructure, hovering interface panels, and environments that blur the boundary between digital simulation and physical reality. The aesthetic draws from K-pop visual culture (particularly groups like aespa and XG, which employ virtual avatars and AI narratives), cybersigil occult-tech symbolism, and the chrome-and-holograph language of sci-fi concept art.

In web and UI design, Y3K Hyperfuturism translates to ultra-dark or deep-space backgrounds pierced by neon holographic gradients, chrome blob shapes that morph and float, translucent panels with glowing edges, and typography that feels engineered by a non-human intelligence. Materials reference liquid metal, holographic film, frosted glass, and bioluminescent organisms. Color palettes lean on electric blues, neon magentas, acid greens, digital lavenders, and iridescent chromes -- often shifting through multi-stop gradients that simulate holographic surfaces. Layouts reject conventional grid structures in favor of floating, overlapping panels that suggest hovering UI elements projected in three-dimensional space.

The overall mood is one of radical alienation and sublime beauty. Where Cyberpunk is dystopian and gritty, Y3K Hyperfuturism is aspirational and otherworldly. Where Chromecore is grounded in real consumer products, Y3K is defiantly imaginary. It asks: what does design look like when humanity has transcended its biological limitations, when cities are grown rather than built, when every surface is a programmable display? The answer is interfaces that feel alive -- breathing, shifting, glowing -- as if the UI itself is a sentient organism from a civilization a thousand years beyond our own.

Visual Characteristics

Core Design Traits

  • Ultra-dark or deep-space backgrounds -- void blacks, midnight blues, and deep purples that suggest infinite cosmic depth rather than mere darkness
  • Holographic gradient surfaces -- multi-color gradients that shift through cyan, magenta, lavender, and chrome, simulating light refracting through holographic film
  • Chrome blob and liquid metal shapes -- amorphous, organic 3D forms with mirror-reflective chrome surfaces that float and morph
  • Hovering UI panels -- interface elements that appear to float in three-dimensional space with subtle parallax and rotation on interaction
  • Neon edge glow and light bleed -- elements emit colored light that bleeds into surrounding space via layered box-shadow and drop-shadow effects
  • Translucent frosted layers -- glass-like panels with heavy backdrop blur, tinted with holographic color washes
  • Bioluminescent accents -- organic glow effects that pulse subtly, as if powered by living light organisms
  • 3D grid planes and wireframe environments -- perspective-transformed grid floors and horizon lines that establish spatial depth
  • Iridescent and shifting color -- CSS animations that cycle hue values, creating surfaces that appear to change color as you observe them
  • Geometric sigil patterns -- abstract, symmetrical line patterns drawn from cybersigilism, used as decorative overlays and section dividers
  • Oversized, cinematic typography -- massive display text that dominates viewport sections, often with holographic gradient fills
  • Particle and light-mote atmospherics -- floating luminous particles that drift across backgrounds, suggesting alien atmospheres

Design Principles

  • Treat every surface as a potential display -- nothing is inert; everything can glow, shift, or respond
  • Use depth and layering to suggest three-dimensional space; the interface should feel volumetric, not flat
  • Color is light: every colored element should appear to emit its own luminescence, not merely be painted
  • Balance spectacle with usability -- holographic effects must enhance hierarchy, not obscure content
  • Embrace organic asymmetry in layout; rigid grids feel too terrestrial for a post-human civilization
  • Chrome and metallic elements serve as neutral anchors amid holographic color chaos
  • Animation should feel biological -- smooth, breathing, pulsing -- not mechanical or robotic
  • Dark backgrounds are the void of space; light exists only where technology or life has placed it

Color Palette

The Y3K Hyperfuturism palette is built on the tension between the absolute darkness of deep space and the vivid, shifting luminescence of advanced holographic technology. Base tones are near-black with cool blue or purple undertones, while accent colors are intensely saturated neons that appear to emit their own light. Chrome and metallic silvers serve as neutral intermediaries. Iridescent and gradient effects are essential -- single flat colors feel incomplete in this aesthetic.

Swatch Hex Role / Usage
Void Abyss #06060F Primary background, deepest spatial layer
Nebula Dark #0C0C1E Card backgrounds, secondary surfaces
Astral Indigo #141432 Elevated panels, nav backgrounds
Cosmic Slate #1E1E3A Borders, dividers, tertiary surfaces
Holo Cyan #00E5FF Primary accent, links, interactive focus states
Plasma Magenta #FF00E5 Secondary accent, highlights, notifications
Neon Violet #B44AFF Tertiary accent, decorative gradients
Digital Lavender #C8A2F8 Soft accent, tags, secondary badges
Acid Lime #A8FF00 Success states, confirmation signals
Chrome Silver #C8C8D4 Metallic neutral, chrome blob surfaces
Bright Chrome #E8E8F0 Primary text on dark backgrounds
Holo Pink #FF6EE6 Warm holographic gradient stop
Deep Chrome #5A5A6E Secondary text, muted labels, disabled states
Grid Blue #1A1A40 Perspective grid lines, structural overlays
Warning Amber #FFCC00 Caution indicators, alert states

CSS Custom Properties

:root {
  /* Backgrounds */
  --y3k-bg-void: #06060f;
  --y3k-bg-nebula: #0c0c1e;
  --y3k-bg-panel: #141432;
  --y3k-bg-elevated: #1e1e3a;

  /* Neon accents */
  --y3k-cyan: #00e5ff;
  --y3k-magenta: #ff00e5;
  --y3k-violet: #b44aff;
  --y3k-lavender: #c8a2f8;
  --y3k-lime: #a8ff00;
  --y3k-pink: #ff6ee6;
  --y3k-amber: #ffcc00;

  /* Chrome / neutrals */
  --y3k-chrome: #c8c8d4;
  --y3k-chrome-bright: #e8e8f0;
  --y3k-chrome-dim: #5a5a6e;
  --y3k-grid: #1a1a40;

  /* Text */
  --y3k-text-primary: #e8e8f0;
  --y3k-text-secondary: #5a5a6e;

  /* Glows */
  --y3k-glow-cyan: 0 0 12px rgba(0, 229, 255, 0.5), 0 0 48px rgba(0, 229, 255, 0.15);
  --y3k-glow-magenta: 0 0 12px rgba(255, 0, 229, 0.5), 0 0 48px rgba(255, 0, 229, 0.15);
  --y3k-glow-violet: 0 0 12px rgba(180, 74, 255, 0.5), 0 0 48px rgba(180, 74, 255, 0.15);
  --y3k-glow-lime: 0 0 12px rgba(168, 255, 0, 0.5), 0 0 48px rgba(168, 255, 0, 0.15);

  /* Holographic gradient */
  --y3k-holo-gradient: linear-gradient(135deg, #00e5ff, #b44aff, #ff00e5, #ff6ee6, #00e5ff);
  --y3k-holo-gradient-subtle: linear-gradient(135deg,
    rgba(0, 229, 255, 0.15),
    rgba(180, 74, 255, 0.15),
    rgba(255, 0, 229, 0.15));

  /* Borders */
  --y3k-border: 1px solid rgba(0, 229, 255, 0.12);
  --y3k-border-bright: 1px solid rgba(0, 229, 255, 0.35);
  --y3k-border-holo: 1px solid rgba(180, 74, 255, 0.25);
}

Typography

Typeface Characteristics

Y3K Hyperfuturism typography is clean, geometric, and engineered -- it should feel as though it was designed by an advanced intelligence for maximum clarity within a holographic projection system. Letterforms favor wide proportions, precise geometry, and futuristic detailing. Display type is often oversized, filling entire viewport widths, and treated with holographic gradient fills or animated color shifts. Body text remains highly legible, using geometric sans-serifs or refined monospaced fonts that suggest machine-generated precision without the grittiness of Cyberpunk terminals.

Font Style Best For
Orbitron Geometric, futuristic, wide Headlines, hero display text, logos
Exo 2 Geometric, semi-rounded Headlines, subheadings, large display
Oxanium Rounded tech, square proportions Buttons, badges, UI labels
Rajdhani Condensed, semi-geometric Navigation, secondary headings, data labels
Space Grotesk Modern geometric sans Body text, paragraphs, readable content
Space Mono Retro-futuristic monospace Code blocks, technical data, captions
Audiowide Ultra-wide, display Logos, branding, dramatic headings
Electrolize Square, digital display Dashboard labels, stat counters, metadata
Jura Light, elegant geometric Long-form body text, article content
Michroma Wide, uppercase-optimized Section headers, category labels

Font Pairing Suggestions

Heading Font Body Font Character
Orbitron (700) Space Grotesk (400) Classic hyperfuturistic, clean and bold
Exo 2 (700) Jura (400) Elegant futurism, long-form friendly
Audiowide (400) Space Mono (400) Maximum sci-fi impact, editorial layouts
Michroma (400) Rajdhani (400) Wide display meets condensed utility
Oxanium (600) Space Grotesk (300) Rounded tech, approachable futurism

Typography CSS Example

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Space+Grotesk:wght@300;400;500;600&display=swap');

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Orbitron', 'Exo 2', sans-serif;
  font-weight: 700;
  color: var(--y3k-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.15;
}

/* Display / Hero text with holographic gradient fill */
.y3k-display {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--y3k-holo-gradient);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: y3k-holo-shift 6s ease-in-out infinite;
}

@keyframes y3k-holo-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Body text */
body {
  font-family: 'Space Grotesk', 'Jura', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--y3k-text-primary);
}

/* UI labels */
.y3k-label {
  font-family: 'Orbitron', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--y3k-violet);
}

/* Data / monospaced */
.y3k-data {
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  color: var(--y3k-cyan);
  line-height: 1.5;
}

Layout Principles

  • Deep-space full-bleed backgrounds -- the viewport is an infinite void; content floats within it as if projected in space
  • Floating, overlapping panel compositions -- UI cards and sections overlap with subtle z-index layering and offset positioning, suggesting holographic projections
  • Perspective-transformed grid floors -- CSS perspective transforms create 3D grid planes that recede into the background, establishing spatial depth
  • Generous vertical spacing -- sections breathe with 100vh+ scroll areas, creating a cinematic pacing that lets holographic elements dominate
  • Asymmetric, organic placement -- content blocks are offset from center, rotated slightly, or positioned at unconventional coordinates to break terrestrial grid conventions
  • Parallax depth on scroll -- foreground content scrolls faster than background grids and particle layers, reinforcing the volumetric illusion
  • Viewport-spanning display type -- hero headings stretch edge-to-edge, creating architectural text that doubles as visual texture
  • Card clusters with varied sizing -- feature grids use mixed card dimensions (tall, wide, small) rather than uniform boxes
  • Navigation as a floating bar -- nav elements appear to hover with translucent backgrounds and glowing bottom borders
  • Section transitions via gradient fades -- sections blend into each other through vertical gradient overlays rather than hard dividers
  • Responsive stacking preserves depth -- on mobile, panels stack but retain their translucent, glowing, floating character through preserved border-glow and backdrop-filter

CSS / Design Techniques

Holographic Card Component

.y3k-card {
  background: rgba(20, 20, 50, 0.6);
  border: 1px solid rgba(0, 229, 255, 0.12);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.y3k-card:hover {
  border-color: rgba(180, 74, 255, 0.4);
  box-shadow: var(--y3k-glow-violet);
  transform: translateY(-4px);
}

/* Holographic shimmer overlay */
.y3k-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(0, 229, 255, 0.05) 0%,
    rgba(180, 74, 255, 0.08) 40%,
    rgba(255, 0, 229, 0.05) 70%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.y3k-card:hover::before {
  opacity: 1;
}

/* Card grid with mixed sizing */
.y3k-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

Y3K Button

.y3k-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--y3k-cyan);
  border: 1px solid rgba(0, 229, 255, 0.4);
  border-radius: 50px;
  padding: 14px 36px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.y3k-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: var(--y3k-holo-gradient);
  background-size: 300% 300%;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: y3k-holo-shift 4s ease-in-out infinite;
}

.y3k-button:hover {
  color: var(--y3k-bg-void);
  border-color: transparent;
  box-shadow: var(--y3k-glow-cyan);
}

.y3k-button:hover::before {
  opacity: 1;
}

.y3k-button span {
  position: relative;
  z-index: 1;
}

/* Magenta variant */
.y3k-button--magenta {
  color: var(--y3k-magenta);
  border-color: rgba(255, 0, 229, 0.4);
}

.y3k-button--magenta:hover {
  box-shadow: var(--y3k-glow-magenta);
}

/* Filled variant */
.y3k-button--filled {
  background: var(--y3k-holo-gradient);
  background-size: 300% 300%;
  color: var(--y3k-bg-void);
  border-color: transparent;
  animation: y3k-holo-shift 4s ease-in-out infinite;
}

.y3k-button--filled:hover {
  box-shadow: var(--y3k-glow-cyan), var(--y3k-glow-magenta);
  filter: brightness(1.15);
}

.y3k-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 16px auto;
  padding: 14px 32px;
  background: rgba(6, 6, 15, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 229, 255, 0.08);
  border-radius: 60px;
}

.y3k-nav__logo {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--y3k-holo-gradient);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: y3k-holo-shift 6s ease-in-out infinite;
}

.y3k-nav__links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.y3k-nav__links a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--y3k-text-secondary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.y3k-nav__links a:hover,
.y3k-nav__links a.active {
  color: var(--y3k-cyan);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}

Hero Section

.y3k-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 40px 80px;
  background: var(--y3k-bg-void);
  overflow: hidden;
}

/* Perspective grid floor */
.y3k-hero::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -50%;
  width: 200%;
  height: 60%;
  background:
    linear-gradient(90deg,
      rgba(0, 229, 255, 0.06) 1px, transparent 1px),
    linear-gradient(0deg,
      rgba(180, 74, 255, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: center bottom;
  mask-image: linear-gradient(to top, white 10%, transparent 80%);
  -webkit-mask-image: linear-gradient(to top, white 10%, transparent 80%);
  pointer-events: none;
}

/* Radial glow behind hero content */
.y3k-hero::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    ellipse,
    rgba(180, 74, 255, 0.15) 0%,
    rgba(0, 229, 255, 0.05) 40%,
    transparent 70%
  );
  pointer-events: none;
}

.y3k-hero__content {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.y3k-hero__subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  color: var(--y3k-chrome-dim);
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

Chrome Blob Decoration

.y3k-blob {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(200, 200, 212, 0.3),
    rgba(0, 229, 255, 0.1),
    rgba(180, 74, 255, 0.15),
    rgba(255, 0, 229, 0.1)
  );
  filter: blur(60px);
  animation: y3k-blob-drift 12s ease-in-out infinite;
  pointer-events: none;
}

@keyframes y3k-blob-drift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    border-radius: 50%;
  }
  25% {
    transform: translate(30px, -20px) scale(1.1);
    border-radius: 40% 60% 55% 45%;
  }
  50% {
    transform: translate(-20px, 20px) scale(0.95);
    border-radius: 55% 45% 40% 60%;
  }
  75% {
    transform: translate(15px, 10px) scale(1.05);
    border-radius: 45% 55% 60% 40%;
  }
}

/* Chrome reflective blob (sharp, non-blurred) */
.y3k-chrome-orb {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #c8c8d4, #e8e8f0, #5a5a6e,
    #c8c8d4, #1e1e3a, #e8e8f0,
    #c8c8d4
  );
  box-shadow:
    0 0 40px rgba(200, 200, 212, 0.2),
    inset 0 0 30px rgba(255, 255, 255, 0.1);
  animation: y3k-orb-rotate 8s linear infinite;
}

@keyframes y3k-orb-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Holographic Gradient Border

.y3k-holo-border {
  position: relative;
  border-radius: 16px;
  padding: 32px;
  background: var(--y3k-bg-nebula);
}

.y3k-holo-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: var(--y3k-holo-gradient);
  background-size: 300% 300%;
  animation: y3k-holo-shift 4s ease-in-out infinite;
  z-index: -1;
}

/* Animated border glow on hover */
.y3k-holo-border:hover::before {
  animation-duration: 2s;
  filter: brightness(1.3);
}

Floating Particle Layer

.y3k-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.y3k-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(0, 229, 255, 0.4);
  animation: y3k-float 15s infinite linear;
}

.y3k-particle:nth-child(2n) {
  background: rgba(180, 74, 255, 0.3);
  animation-duration: 20s;
}

.y3k-particle:nth-child(3n) {
  background: rgba(255, 0, 229, 0.25);
  animation-duration: 18s;
  width: 2px;
  height: 2px;
}

@keyframes y3k-float {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    transform: translateY(-10vh) translateX(40px);
    opacity: 0;
  }
}

Glowing Divider Line

.y3k-divider {
  width: 100%;
  height: 1px;
  border: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--y3k-cyan) 20%,
    var(--y3k-violet) 50%,
    var(--y3k-magenta) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 8px rgba(0, 229, 255, 0.3),
    0 0 20px rgba(180, 74, 255, 0.15);
  margin: 60px 0;
}

Design Do's and Don'ts

Do's

  • Use ultra-dark backgrounds with cool blue or purple undertones to establish deep-space depth
  • Apply holographic multi-stop gradients to key elements (headings, borders, buttons) for signature Y3K shimmer
  • Use backdrop-filter: blur() generously to create translucent, floating panel effects
  • Incorporate chrome or liquid-metal decorative elements (blobs, orbs, reflections) as visual anchors
  • Animate color shifts slowly and smoothly -- holographic surfaces should breathe, not strobe
  • Use oversized display typography with gradient fills to create architectural, cinematic headings
  • Layer depth through overlapping elements, parallax, and perspective-transformed grids
  • Maintain strong luminance contrast between glowing elements and dark backgrounds for readability

Don'ts

  • Use white or light backgrounds -- they shatter the deep-space illusion that the entire aesthetic depends on
  • Apply flat, single-color fills to accent elements -- Y3K demands gradients, glows, and iridescence
  • Overuse animation speed -- rapid flickering or harsh strobing contradicts the smooth, organic feel
  • Use serif fonts, handwriting fonts, or anything warm and humanistic -- typography must feel engineered and geometric
  • Clutter the layout with too many glowing elements at equal intensity; visual hierarchy requires some restraint
  • Mix earth tones, pastels, or muted organic colors into the palette -- every color should feel synthetic and luminous
  • Ignore mobile performance -- reduce blur radii, particle counts, and animation complexity on lower-powered devices
  • Treat this as merely "Cyberpunk with different colors" -- Y3K is aspirational and alien, not dystopian and gritty
Aesthetic Relationship to Y3K Hyperfuturism
Cyberpunk Shares neon-on-dark palette and futuristic technology themes, but Cyberpunk is dystopian and gritty; Y3K is aspirational and alien
Chromecore Both use chrome and metallic surfaces, but Chromecore is grounded in real Y2K consumer products; Y3K is speculative and otherworldly
Y2K Glam Y2K nostalgia is the cultural ancestor; Y3K pushes the same techno-optimism a thousand years further into pure speculation
Glassmorphism The frosted-glass translucent panel technique is shared; Y3K adds holographic color, glow effects, and deeper spatial layering
Cybersigilism Shares occult-tech geometric pattern language; Cybersigilism is darker and more aggressive, Y3K is luminous and transcendent
Vaporwave Both reference technology culture, but Vaporwave is ironic and pastel-retro; Y3K is earnest and forward-facing
Dark Mode Neon Overlaps in neon-on-dark execution, but Dark Mode Neon is a practical UI pattern; Y3K is a full immersive aesthetic
Synthwave Both use neon gradients and dark backgrounds, but Synthwave looks back at the 1980s; Y3K looks forward a millennium
Afrofuturism Both imagine radical futures beyond present constraints; Afrofuturism centers diasporic cultural narratives, Y3K centers post-human technology
Frutiger Aero Shares optimistic technology themes with clean surfaces, but Frutiger Aero is warm and natural; Y3K is cold, alien, and cosmic

Quick-Start HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Y3K Hyperfuturism</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Space+Grotesk:wght@300;400;500;600&family=Space+Mono&display=swap" rel="stylesheet">
  <style>
    /* =============================================
       Y3K HYPERFUTURISM -- QUICK-START TEMPLATE
       ============================================= */

    :root {
      /* Backgrounds */
      --y3k-bg-void: #06060f;
      --y3k-bg-nebula: #0c0c1e;
      --y3k-bg-panel: #141432;
      --y3k-bg-elevated: #1e1e3a;

      /* Neon accents */
      --y3k-cyan: #00e5ff;
      --y3k-magenta: #ff00e5;
      --y3k-violet: #b44aff;
      --y3k-lavender: #c8a2f8;
      --y3k-lime: #a8ff00;
      --y3k-pink: #ff6ee6;
      --y3k-amber: #ffcc00;

      /* Chrome / neutrals */
      --y3k-chrome: #c8c8d4;
      --y3k-chrome-bright: #e8e8f0;
      --y3k-chrome-dim: #5a5a6e;
      --y3k-grid: #1a1a40;

      /* Text */
      --y3k-text-primary: #e8e8f0;
      --y3k-text-secondary: #5a5a6e;

      /* Glows */
      --y3k-glow-cyan: 0 0 12px rgba(0, 229, 255, 0.5),
        0 0 48px rgba(0, 229, 255, 0.15);
      --y3k-glow-magenta: 0 0 12px rgba(255, 0, 229, 0.5),
        0 0 48px rgba(255, 0, 229, 0.15);
      --y3k-glow-violet: 0 0 12px rgba(180, 74, 255, 0.5),
        0 0 48px rgba(180, 74, 255, 0.15);

      /* Holographic gradient */
      --y3k-holo-gradient: linear-gradient(
        135deg, #00e5ff, #b44aff, #ff00e5, #ff6ee6, #00e5ff
      );
    }

    /* ---- RESET ---- */
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--y3k-bg-void);
      color: var(--y3k-text-primary);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1rem;
      line-height: 1.75;
      overflow-x: hidden;
    }

    h1, h2, h3, h4 {
      font-family: 'Orbitron', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      line-height: 1.15;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    /* ---- HOLOGRAPHIC SHIFT ANIMATION ---- */
    @keyframes holo-shift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    /* ---- BLOB DRIFT ANIMATION ---- */
    @keyframes blob-drift {
      0%, 100% {
        transform: translate(0, 0) scale(1);
        border-radius: 50%;
      }
      33% {
        transform: translate(40px, -30px) scale(1.1);
        border-radius: 40% 60% 55% 45%;
      }
      66% {
        transform: translate(-30px, 20px) scale(0.95);
        border-radius: 55% 45% 40% 60%;
      }
    }

    /* ---- FLOAT ANIMATION (particles) ---- */
    @keyframes float-up {
      0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
      }
      10% { opacity: 1; }
      90% { opacity: 0.6; }
      100% {
        transform: translateY(-10vh) translateX(30px);
        opacity: 0;
      }
    }

    /* ---- PARTICLE LAYER ---- */
    .particles {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .particles span {
      position: absolute;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(0, 229, 255, 0.35);
      animation: float-up 18s infinite linear;
    }

    .particles span:nth-child(1) { left: 5%; animation-delay: 0s; animation-duration: 16s; }
    .particles span:nth-child(2) { left: 15%; animation-delay: 2s; animation-duration: 22s; background: rgba(180, 74, 255, 0.3); }
    .particles span:nth-child(3) { left: 25%; animation-delay: 4s; animation-duration: 18s; }
    .particles span:nth-child(4) { left: 38%; animation-delay: 1s; animation-duration: 20s; background: rgba(255, 0, 229, 0.25); width: 2px; height: 2px; }
    .particles span:nth-child(5) { left: 50%; animation-delay: 3s; animation-duration: 15s; }
    .particles span:nth-child(6) { left: 62%; animation-delay: 5s; animation-duration: 19s; background: rgba(180, 74, 255, 0.3); }
    .particles span:nth-child(7) { left: 75%; animation-delay: 2s; animation-duration: 21s; background: rgba(255, 0, 229, 0.2); width: 2px; height: 2px; }
    .particles span:nth-child(8) { left: 88%; animation-delay: 4s; animation-duration: 17s; }
    .particles span:nth-child(9) { left: 95%; animation-delay: 1s; animation-duration: 23s; background: rgba(200, 162, 248, 0.3); }
    .particles span:nth-child(10) { left: 42%; animation-delay: 6s; animation-duration: 16s; }

    /* ---- NAVIGATION ---- */
    nav {
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: min(1340px, calc(100% - 32px));
      margin-top: 16px;
      padding: 14px 32px;
      background: rgba(6, 6, 15, 0.7);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(0, 229, 255, 0.08);
      border-radius: 60px;
    }

    .logo {
      font-family: 'Orbitron', sans-serif;
      font-weight: 900;
      font-size: 1.05rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      background: var(--y3k-holo-gradient);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: holo-shift 6s ease-in-out infinite;
    }

    nav ul {
      display: flex;
      gap: 28px;
      list-style: none;
    }

    nav ul a {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 500;
      font-size: 0.85rem;
      color: var(--y3k-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      transition: color 0.3s, text-shadow 0.3s;
    }

    nav ul a:hover {
      color: var(--y3k-cyan);
      text-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
    }

    /* ---- HERO ---- */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 140px 40px 100px;
      overflow: hidden;
    }

    /* Perspective grid floor */
    .hero::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: -50%;
      width: 200%;
      height: 55%;
      background:
        linear-gradient(90deg,
          rgba(0, 229, 255, 0.05) 1px, transparent 1px),
        linear-gradient(0deg,
          rgba(180, 74, 255, 0.05) 1px, transparent 1px);
      background-size: 60px 60px;
      transform: perspective(500px) rotateX(60deg);
      transform-origin: center bottom;
      mask-image: linear-gradient(to top, white 10%, transparent 75%);
      -webkit-mask-image: linear-gradient(to top, white 10%, transparent 75%);
      pointer-events: none;
    }

    /* Radial glow */
    .hero::after {
      content: '';
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 700px;
      height: 700px;
      background: radial-gradient(
        ellipse,
        rgba(180, 74, 255, 0.12) 0%,
        rgba(0, 229, 255, 0.04) 40%,
        transparent 70%
      );
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 860px;
    }

    .hero h1 {
      font-size: clamp(2.8rem, 7vw, 6rem);
      font-weight: 900;
      letter-spacing: 0.08em;
      background: var(--y3k-holo-gradient);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: holo-shift 6s ease-in-out infinite;
      margin-bottom: 1.5rem;
    }

    .hero p {
      font-size: 1.15rem;
      color: var(--y3k-chrome-dim);
      max-width: 600px;
      margin: 0 auto 2.5rem;
      line-height: 1.8;
    }

    /* Chrome blob decoration */
    .hero-blob {
      position: absolute;
      width: 350px;
      height: 350px;
      border-radius: 50%;
      background: linear-gradient(
        135deg,
        rgba(200, 200, 212, 0.2),
        rgba(0, 229, 255, 0.08),
        rgba(180, 74, 255, 0.1),
        rgba(255, 0, 229, 0.06)
      );
      filter: blur(70px);
      animation: blob-drift 14s ease-in-out infinite;
      pointer-events: none;
    }

    .hero-blob--left {
      top: 20%;
      left: -5%;
    }

    .hero-blob--right {
      bottom: 15%;
      right: -8%;
      animation-delay: -5s;
      width: 280px;
      height: 280px;
    }

    /* ---- BUTTON ---- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: var(--y3k-cyan);
      border: 1px solid rgba(0, 229, 255, 0.4);
      border-radius: 50px;
      padding: 14px 40px;
      font-family: 'Orbitron', sans-serif;
      font-weight: 600;
      font-size: 0.8rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.4s ease;
    }

    .btn::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50px;
      background: var(--y3k-holo-gradient);
      background-size: 300% 300%;
      opacity: 0;
      transition: opacity 0.4s ease;
      animation: holo-shift 4s ease-in-out infinite;
    }

    .btn:hover {
      color: var(--y3k-bg-void);
      border-color: transparent;
      box-shadow: var(--y3k-glow-cyan);
    }

    .btn:hover::before {
      opacity: 1;
    }

    .btn span {
      position: relative;
      z-index: 1;
    }

    .btn--magenta {
      color: var(--y3k-magenta);
      border-color: rgba(255, 0, 229, 0.4);
    }

    .btn--magenta:hover {
      box-shadow: var(--y3k-glow-magenta);
    }

    /* ---- SECTION SHARED ---- */
    section {
      position: relative;
      z-index: 1;
    }

    .section-label {
      font-family: 'Orbitron', sans-serif;
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--y3k-violet);
      margin-bottom: 12px;
    }

    /* ---- FEATURES SECTION ---- */
    .features {
      padding: 100px 40px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .features > h2 {
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      text-align: center;
      color: var(--y3k-text-primary);
      margin-bottom: 3.5rem;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
    }

    .card {
      background: rgba(20, 20, 50, 0.55);
      border: 1px solid rgba(0, 229, 255, 0.1);
      border-radius: 16px;
      padding: 32px;
      position: relative;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      overflow: hidden;
      transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
    }

    .card:hover {
      border-color: rgba(180, 74, 255, 0.35);
      box-shadow: var(--y3k-glow-violet);
      transform: translateY(-4px);
    }

    .card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 16px;
      background: linear-gradient(
        135deg,
        rgba(0, 229, 255, 0.04) 0%,
        rgba(180, 74, 255, 0.06) 50%,
        rgba(255, 0, 229, 0.04) 100%
      );
      opacity: 0;
      transition: opacity 0.4s;
      pointer-events: none;
    }

    .card:hover::before { opacity: 1; }

    .card h3 {
      font-size: 1.1rem;
      margin-bottom: 0.75rem;
    }

    .card p {
      color: var(--y3k-text-secondary);
      font-size: 0.95rem;
      line-height: 1.7;
    }

    /* ---- STATS SECTION ---- */
    .stats {
      padding: 80px 40px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 24px;
      text-align: center;
    }

    .stat {
      padding: 32px 20px;
      border: 1px solid rgba(0, 229, 255, 0.08);
      border-radius: 16px;
      background: rgba(12, 12, 30, 0.5);
    }

    .stat-value {
      font-family: 'Orbitron', sans-serif;
      font-size: 2.4rem;
      font-weight: 900;
      background: var(--y3k-holo-gradient);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: holo-shift 6s ease-in-out infinite;
    }

    .stat-label {
      font-size: 0.8rem;
      color: var(--y3k-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-top: 8px;
    }

    /* ---- HOLOGRAPHIC DIVIDER ---- */
    .divider {
      width: 100%;
      max-width: 1200px;
      height: 1px;
      border: none;
      margin: 0 auto;
      background: linear-gradient(
        90deg,
        transparent 0%,
        var(--y3k-cyan) 20%,
        var(--y3k-violet) 50%,
        var(--y3k-magenta) 80%,
        transparent 100%
      );
      box-shadow:
        0 0 8px rgba(0, 229, 255, 0.25),
        0 0 20px rgba(180, 74, 255, 0.1);
    }

    /* ---- CTA SECTION ---- */
    .cta {
      text-align: center;
      padding: 100px 40px;
    }

    .cta h2 {
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      background: var(--y3k-holo-gradient);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: holo-shift 6s ease-in-out infinite;
      margin-bottom: 1rem;
    }

    .cta p {
      color: var(--y3k-text-secondary);
      max-width: 500px;
      margin: 0 auto 2rem;
    }

    /* ---- FOOTER ---- */
    footer {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 40px;
      border-top: 1px solid rgba(0, 229, 255, 0.06);
      color: var(--y3k-text-secondary);
      font-size: 0.8rem;
    }

    footer .footer-brand {
      font-family: 'Orbitron', sans-serif;
      font-weight: 700;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--y3k-chrome);
    }

    footer p {
      margin-top: 8px;
      color: var(--y3k-chrome-dim);
    }

    /* ---- RESPONSIVE ---- */
    @media (max-width: 768px) {
      nav {
        padding: 10px 20px;
        border-radius: 40px;
      }

      nav ul { gap: 16px; }

      nav ul a { font-size: 0.75rem; }

      .hero {
        min-height: auto;
        padding: 120px 20px 80px;
      }

      .hero h1 {
        font-size: clamp(2rem, 8vw, 3.5rem);
      }

      .hero p { font-size: 1rem; }

      .features,
      .stats,
      .cta {
        padding: 60px 20px;
      }

      .features-grid,
      .stats-grid {
        grid-template-columns: 1fr;
      }

      .hero-blob { display: none; }
    }

    @media (max-width: 480px) {
      nav ul { gap: 12px; }

      .hero h1 { letter-spacing: 0.04em; }

      .card { padding: 24px; }
    }
  </style>
</head>
<body>

  <!-- Floating particles -->
  <div class="particles">
    <span></span><span></span><span></span><span></span><span></span>
    <span></span><span></span><span></span><span></span><span></span>
  </div>

  <!-- Navigation -->
  <nav>
    <a href="#" class="logo">Axiom</a>
    <ul>
      <li><a href="#systems">Systems</a></li>
      <li><a href="#metrics">Metrics</a></li>
      <li><a href="#transmit">Transmit</a></li>
    </ul>
  </nav>

  <!-- Hero Section -->
  <section class="hero">
    <div class="hero-blob hero-blob--left"></div>
    <div class="hero-blob hero-blob--right"></div>
    <div class="hero-content">
      <h1>Beyond the Singularity</h1>
      <p>
        Post-human infrastructure for civilizations that have outgrown
        their home stars. Holographic interfaces woven into the fabric
        of sentient architecture.
      </p>
      <a href="#systems" class="btn"><span>Initialize</span></a>
    </div>
  </section>

  <!-- Divider -->
  <hr class="divider">

  <!-- Features Section -->
  <section class="features" id="systems">
    <div class="section-label">// System Modules</div>
    <h2>Core Architecture</h2>
    <div class="features-grid">
      <div class="card">
        <div class="section-label">Module 01</div>
        <h3>Quantum Lattice</h3>
        <p>
          Self-assembling computational substrate that grows like
          crystalline organisms. Every node is both processor and
          display, rendering holographic data in real-time across
          the megacity grid.
        </p>
      </div>
      <div class="card">
        <div class="section-label">Module 02</div>
        <h3>Holo-Membrane</h3>
        <p>
          Programmable atmospheric surfaces that transform any
          physical boundary into an interactive display. Architecture
          becomes interface -- walls, ceilings, and streets are all
          canvases for projected data.
        </p>
      </div>
      <div class="card">
        <div class="section-label">Module 03</div>
        <h3>Chrome Synthesis</h3>
        <p>
          Liquid-metal fabrication at molecular scale. Objects emerge
          from chrome pools, self-assembling into tools, furniture,
          or entire vehicles on demand, dissolving back when no
          longer needed.
        </p>
      </div>
    </div>
  </section>

  <!-- Divider -->
  <hr class="divider">

  <!-- Stats Section -->
  <section class="stats" id="metrics">
    <div class="section-label" style="text-align:center;">// Telemetry</div>
    <div class="stats-grid">
      <div class="stat">
        <div class="stat-value">3.7T</div>
        <div class="stat-label">Neural Endpoints</div>
      </div>
      <div class="stat">
        <div class="stat-value">99.99</div>
        <div class="stat-label">Uptime Coefficient</div>
      </div>
      <div class="stat">
        <div class="stat-value">0.02ms</div>
        <div class="stat-label">Holo Latency</div>
      </div>
      <div class="stat">
        <div class="stat-value">1024</div>
        <div class="stat-label">Active Dimensions</div>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="cta" id="transmit">
    <h2>Ready to Transcend?</h2>
    <p>
      The old world was built with hands. The new one is grown
      with light. Step through the membrane.
    </p>
    <a href="#" class="btn btn--magenta"><span>Transmit Signal</span></a>
  </section>

  <!-- Footer -->
  <footer>
    <div class="footer-brand">Axiom Systems // Y3K</div>
    <p>Projected from the holographic substrate of a post-human megacity</p>
  </footer>

</body>
</html>

Implementation Tips

  • Performance-first particles: The floating particle layer uses pure CSS animations. For production sites with many particles, consider replacing with a lightweight Canvas or WebGL implementation to reduce paint operations
  • Reduce blur on mobile: backdrop-filter: blur() is GPU-intensive. Use @media queries to reduce or remove blur on devices with smaller viewports, or use @supports to provide a solid fallback background
  • Holographic gradients via background-size: 300%: The signature Y3K shimmer is achieved by oversizing the gradient and animating background-position. Keep animation durations long (4-8s) and easing smooth (ease-in-out) to avoid a frenetic feel
  • -webkit-background-clip: text: The holographic text fill technique requires both the -webkit- prefixed and standard background-clip: text property. Test across browsers, and provide a solid color fallback for unsupported contexts
  • Dark mode is the only mode: Unlike many aesthetics that offer light/dark variants, Y3K Hyperfuturism is inherently dark. Do not build a light theme toggle -- the entire visual language depends on luminous elements against void-dark backgrounds
  • Perspective grids with mask-image: The 3D grid floor effect uses CSS perspective and rotateX transforms combined with mask-image gradients to fade the grid into the background. This avoids harsh edges while suggesting infinite depth
  • Color accessibility: Neon accents on dark backgrounds can achieve strong luminance contrast, but verify WCAG compliance for body text. --y3k-text-primary (#E8E8F0) on --y3k-bg-void (#06060F) provides approximately 17:1 contrast ratio, well above AAA requirements
  • Chrome blob effects: The ambient chrome blobs use large filter: blur() values (60-80px). For static implementations, consider pre-rendering these as image assets to eliminate the continuous blur computation cost
← Zurück zu den Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alle Rechte vorbehalten.

Designs von chrislemke/website_designs, lizenziert unter MIT.