website_designs

Weirdcore - Design Reference

Overview

Weirdcore is an internet-born visual aesthetic rooted in the surreal distortion of early-2000s digital imagery, evoking feelings of confusion, disorientation, nostalgia, and existential dread. It weaponizes the low-fidelity artifacts of amateur photo editing, primitive computer graphics, JPEG compression, and forgotten web pages to construct environments that feel simultaneously familiar and deeply wrong. Recurring motifs include disembodied eyes, cryptic text fragments, warped perspectives, oversaturated or washed-out color shifts, and liminal spaces rendered through corrupted digital processes. Unlike its calmer sibling Dreamcore, Weirdcore is aggressively distorted, intentionally chaotic, and leans into the uncanny valley of digital memory – producing visuals that look like corrupted screenshots from a reality that never quite existed.

Visual Characteristics

Core Design Traits

Low-fidelity image distortion: Heavy JPEG compression artifacts, pixel stretching, resolution degradation, and visible image corruption that mimic early internet photo quality and broken file transfers
Eye and face motifs: Disembodied eyeballs, floating faces, misplaced facial features, and watchful gazes superimposed on surreal backgrounds to evoke surveillance and paranoia
Cryptic text overlays: Unsettling, fragmented phrases in basic system fonts (Arial, Times New Roman, Comic Sans) placed illogically across compositions – messages that read like half-remembered warnings or corrupted error logs
Color channel splitting: RGB separation, chromatic aberration, and deliberate color channel misalignment that fracture images into ghostly overlapping layers
Liminal space corruption: Familiar environments (hallways, classrooms, parking lots, pools) rendered through distortion filters, unnatural color grading, and perspective warping
WordArt and early web typography: Garish gradient text, embossed effects, rainbow fills, and stretched decorative type reminiscent of Microsoft WordArt and GeoCities pages
Analog-digital hybrid noise: Layered VHS tracking lines, CRT scanlines, digital glitch blocks, and film grain simultaneously applied to create temporal confusion
Impossible geometry: Recursive rooms, non-Euclidean perspectives, horizon lines that bend wrong, and spaces that violate spatial logic
Oversaturated neon bleeding: Harsh neon greens, magentas, and cyans that bleed beyond their boundaries as if the display cannot contain them
Repeating and tiling patterns: Unsettling repetition of objects, faces, or environmental elements arranged in grids or spirals that suggest broken rendering

Design Principles

Distort aggressively: comfort is the enemy; every element should feel slightly to severely wrong
Layer multiple eras of digital artifacts simultaneously – VHS, JPEG, pixel art, and modern glitch in one composition
Use text as a disorienting weapon rather than a communication tool; meaning should be ambiguous or absent
Embrace anti-design: break alignment, ignore hierarchy, reject usability conventions deliberately
Make the viewer question whether the design is intentional or a system malfunction
Treat nostalgia as something sinister rather than warm; familiar objects become threatening in the wrong context
Prioritize emotional unease over visual polish; roughness and imperfection are the materials

Color Palette

Swatch	Hex	Role
Corrupted White	`#E8E4D8`	Yellowed, aged background like a sun-damaged photograph
Static Grey	`#A3A3A3`	Neutral noise, interface chrome, muted surfaces
Void Black	`#0A0A0F`	Deep shadows, text, pupil of the eye motif
Neon Bleed Green	`#39FF14`	Toxic glow, matrix-style accents, terminal text
Glitch Magenta	`#FF00FF`	Channel splitting, chromatic aberration highlight
Warning Yellow	`#E8D44D`	Grainy filter tone, aged film, cautionary accents
Liminal Lavender	`#B8A9C9`	Washed-out surreal haze, dreamlike midtone
Scan Blue	`#00BFFF`	CRT glow, hyperlink nostalgia, digital water
Flesh Pink	`#D4A0A0`	Uncanny skin tones, organic unease
Error Red	`#CC2233`	System failure, alert states, blood pixel
Compression Tan	`#C8B890`	JPEG artifact tone, institutional wall color
VHS Purple	`#6B2D8B`	Tracking distortion, analog decay accent

CSS Custom Properties

:root {
  --weird-corrupted: #E8E4D8;
  --weird-static: #A3A3A3;
  --weird-void: #0A0A0F;
  --weird-neon-green: #39FF14;
  --weird-glitch-magenta: #FF00FF;
  --weird-warning: #E8D44D;
  --weird-lavender: #B8A9C9;
  --weird-scan-blue: #00BFFF;
  --weird-flesh: #D4A0A0;
  --weird-error: #CC2233;
  --weird-compression: #C8B890;
  --weird-vhs: #6B2D8B;
}

Typography

Typeface Characteristics

Weirdcore typography deliberately abuses type. Fonts are selected for their associations with early computing, system defaults, and cheap web design. They are then distorted, misaligned, overlaid, and set at inappropriate sizes. The goal is text that feels like a message left behind in a corrupted file system – legible enough to unsettle, broken enough to disorient. Comic Sans, Times New Roman, and Arial carry ironic weight here; pixel fonts and monospaced terminals evoke obsolete machines. WordArt-style gradients and embossing push type into the realm of garish early-web decoration.

Recommended Web Fonts (Google Fonts)

Font	Style	Best For
VT323	Pixel monospace	Terminal messages, error logs, system text, retro CRT displays
Press Start 2P	Pixel display	Headings with aggressive 8-bit energy, game-over screens
Creepster	Horror display	Unsettling headlines, dread-inducing labels (use sparingly)
Comic Neue	Casual handwritten	Ironic body text, naive-sinister captions (Comic Sans substitute)
Special Elite	Typewriter	Found-document text, institutional reports, degraded memos
Rubik Glitch	Glitch display	Headers with built-in distortion, corrupted titles
Space Mono	Technical monospace	Code-style body text, system interface labels
Bungee Shade	Dimensional display	WordArt-style decorative headers, retro 3D text effect

Font Pairing Suggestions

Heading	Body	Mood
Rubik Glitch 400	VT323 400	Corrupted system terminal, broken software
Press Start 2P 400	Comic Neue 400	Sinister game interface, ironic naivety
Creepster 400	Special Elite 400	Found horror document, unsettling report
Bungee Shade 400	Space Mono 400	Early web maximalism meets cold precision
VT323 400	Comic Neue 300	Old machine with childlike wrongness

Typography CSS Example

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=Creepster&family=Comic+Neue:wght@300;400;700&family=Special+Elite&family=Rubik+Glitch&family=Space+Mono:wght@400;700&family=Bungee+Shade&display=swap');

body {
  font-family: 'Comic Neue', 'Comic Sans MS', cursive;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--weird-void);
  -webkit-font-smoothing: none;
}

h1, h2 {
  font-family: 'Rubik Glitch', 'Impact', sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--weird-neon-green);
  text-shadow:
    3px 0 var(--weird-glitch-magenta),
    -3px 0 var(--weird-scan-blue);
}

h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--weird-error);
}

.system-text {
  font-family: 'VT323', monospace;
  font-size: 1.4rem;
  color: var(--weird-neon-green);
}

.found-text {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 0.95rem;
  color: var(--weird-static);
  transform: rotate(-0.5deg);
}

.wordart-text {
  font-family: 'Bungee Shade', cursive;
  font-size: 2.5rem;
  background: linear-gradient(180deg, var(--weird-warning), var(--weird-error), var(--weird-vhs));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Layout Principles

Grid and Structure

Anti-grid chaos: Deliberately break alignment; elements should overlap, rotate slightly, and ignore column structures
Layered z-index stacking: Stack elements on top of each other with varying opacity and blend modes to create depth confusion
Random positioning: Use absolute and fixed positioning to scatter elements unpredictably across the viewport
Broken symmetry: Start with a recognizable layout pattern (centered hero, card grid) then corrupt it with offsets, skews, and misaligned margins
Mixed scale elements: Combine extremely large elements with tiny ones in close proximity to break spatial logic

Section Organization

Disorienting hero: Full-viewport entry with distorted background, cryptic oversized text, and eye motifs
Corrupted content blocks: Information presented in degraded card-like containers with visible glitch artifacts
System message interruptions: Terminal-style text blocks that interrupt the flow with cryptic warnings or error messages
Tiling zones: Sections where a single image or pattern repeats in an uncanny grid
Footer as void: The page should feel like it dissolves into nothing or loops back on itself

Responsive Approach

On mobile, increase the sense of claustrophobia by letting elements overlap and crowd the viewport
Allow horizontal overflow intentionally on some elements to break the expected containment of mobile layouts
Scale glitch effects and text distortions proportionally; they should remain aggressive at every breakpoint
Navigation can disappear entirely on small screens, forcing exploration and confusion
Use viewport units aggressively to maintain the surreal sense of scale across devices

CSS / Design Techniques

Glitch Card

.weird-card {
  background: var(--weird-corrupted);
  border: 2px solid var(--weird-static);
  padding: 32px;
  max-width: 480px;
  position: relative;
  overflow: hidden;
  transform: rotate(-0.3deg);
}

.weird-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(57, 255, 20, 0.03) 2px,
      rgba(57, 255, 20, 0.03) 4px
    );
  pointer-events: none;
}

.weird-card::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 10%;
  width: 80%;
  height: 4px;
  background: var(--weird-glitch-magenta);
  opacity: 0.6;
  animation: glitch-bar 3s infinite steps(1);
}

@keyframes glitch-bar {
  0%, 90% { top: -2px; opacity: 0; }
  91% { top: 20%; opacity: 0.6; }
  93% { top: 50%; opacity: 0.4; }
  95% { top: 80%; opacity: 0.7; }
  97% { top: 10%; opacity: 0.3; }
  100% { top: -2px; opacity: 0; }
}

Corrupted Button

.weird-button {
  background: var(--weird-void);
  color: var(--weird-neon-green);
  border: 1px solid var(--weird-neon-green);
  padding: 10px 24px;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: none;
}

.weird-button:hover {
  background: var(--weird-neon-green);
  color: var(--weird-void);
  text-shadow:
    2px 0 var(--weird-glitch-magenta),
    -2px 0 var(--weird-scan-blue);
  animation: button-corrupt 0.15s infinite steps(1);
}

@keyframes button-corrupt {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, -2px); }
  100% { transform: translate(1px, 2px); }
}

.weird-nav {
  background: var(--weird-void);
  border-bottom: 2px solid var(--weird-neon-green);
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.weird-nav::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--weird-glitch-magenta);
  clip-path: polygon(0 0, 15% 0, 15% 100%, 30% 100%, 30% 0, 60% 0, 60% 100%, 75% 100%, 75% 0, 100% 0, 100% 100%, 0 100%);
}

.weird-nav a {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: var(--weird-neon-green);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.weird-nav a:hover {
  color: var(--weird-glitch-magenta);
  text-shadow:
    1px 0 var(--weird-scan-blue),
    -1px 0 var(--weird-error);
}

Corrupted Hero

.weird-hero {
  background: var(--weird-void);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.weird-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(107, 45, 139, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(57, 255, 20, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 0, 255, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.weird-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(57, 255, 20, 0.015) 2px,
    rgba(57, 255, 20, 0.015) 4px
  );
  pointer-events: none;
}

.weird-hero h1 {
  font-family: 'Rubik Glitch', sans-serif;
  font-size: clamp(2rem, 8vw, 5rem);
  color: var(--weird-neon-green);
  text-shadow:
    4px 0 var(--weird-glitch-magenta),
    -4px 0 var(--weird-scan-blue),
    0 0 40px rgba(57, 255, 20, 0.3);
  position: relative;
  animation: hero-glitch 4s infinite steps(1);
}

@keyframes hero-glitch {
  0%, 85% { text-shadow: 4px 0 var(--weird-glitch-magenta), -4px 0 var(--weird-scan-blue), 0 0 40px rgba(57,255,20,0.3); transform: translate(0,0) skewX(0deg); }
  86% { text-shadow: -6px 0 var(--weird-error), 6px 0 var(--weird-scan-blue); transform: translate(3px,-1px) skewX(-2deg); }
  88% { text-shadow: 8px 2px var(--weird-glitch-magenta), -4px -2px var(--weird-neon-green); transform: translate(-2px,2px) skewX(1deg); }
  90% { text-shadow: 4px 0 var(--weird-glitch-magenta), -4px 0 var(--weird-scan-blue), 0 0 40px rgba(57,255,20,0.3); transform: translate(0,0) skewX(0deg); }
}

.weird-hero .subtitle {
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  color: var(--weird-static);
  margin-top: 24px;
  position: relative;
}

Eye Motif Element

.weird-eye {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid var(--weird-neon-green);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(57, 255, 20, 0.2);
  animation: eye-pulse 3s ease-in-out infinite;
}

.weird-eye::before {
  content: '';
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--weird-neon-green);
}

.weird-eye::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--weird-void);
}

@keyframes eye-pulse {
  0%, 100% { box-shadow: 0 0 30px rgba(57, 255, 20, 0.2); }
  50% { box-shadow: 0 0 60px rgba(57, 255, 20, 0.4), 0 0 100px rgba(255, 0, 255, 0.15); }
}

System Warning Message

.weird-system {
  font-family: 'VT323', monospace;
  font-size: 1.3rem;
  color: var(--weird-neon-green);
  background: rgba(10, 10, 15, 0.9);
  border-left: 3px solid var(--weird-error);
  padding: 16px 24px;
  margin: 32px 0;
  position: relative;
}

.weird-system::before {
  content: 'WARNING://';
  display: block;
  font-size: 0.9rem;
  color: var(--weird-error);
  margin-bottom: 8px;
  letter-spacing: 0.2em;
}

.weird-system::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 255, 0.03));
  pointer-events: none;
}

Scanline Overlay

.weird-scanlines {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.03) 0px,
      rgba(0, 0, 0, 0.03) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: multiply;
}

.weird-scanlines::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(10, 10, 15, 0.15) 100%
  );
}

Corrupted Image Container

.weird-image {
  position: relative;
  overflow: hidden;
  filter: contrast(1.2) saturate(0.7) hue-rotate(10deg);
}

.weird-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(
      transparent 0%,
      rgba(255, 0, 255, 0.05) 30%,
      transparent 31%,
      transparent 60%,
      rgba(57, 255, 20, 0.05) 61%,
      transparent 62%
    );
  pointer-events: none;
  animation: image-corrupt 5s linear infinite;
}

@keyframes image-corrupt {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.weird-image img {
  display: block;
  width: 100%;
  image-rendering: pixelated;
}

Design Do’s and Don’ts

Do

Layer multiple types of digital distortion (JPEG, VHS, pixel, glitch) simultaneously for temporal confusion
Use cryptic, fragmented text that reads like corrupted error messages or half-remembered thoughts
Include eye motifs and watchful imagery to create a sense of paranoid surveillance
Embrace anti-design: break grids, ignore hierarchy, misalign elements, and reject conventional UX
Start with familiar environments and corrupt them until they become uncanny and threatening
Use neon green, magenta, and cyan as aggressive accent colors that bleed and glow unnaturally
Apply chromatic aberration and RGB channel splitting to text and images for a broken-display feel
Make the viewer uncertain whether the design is intentional or a genuine malfunction
Reference early internet aesthetics (WordArt, GeoCities, Windows XP) through a sinister lens
Use animation sparingly but with jarring, stepped timing functions rather than smooth easing

Don’t

Create polished, clean, or visually comfortable layouts; Weirdcore must feel wrong
Use warm, inviting color palettes or harmonious color relationships
Apply smooth, predictable animations with gentle easing curves
Build logical navigation systems that help the user feel oriented and safe
Use professional, well-kerned typography with proper hierarchy; text should feel broken or misused
Confuse Weirdcore with generic horror; it is surreal unease, not jump scares or gore
Overdo effects to the point of complete illegibility; there should be enough clarity to draw the viewer in
Use modern, trendy UI patterns (glassmorphism, neumorphism, bento grids) without corrupting them first
Apply consistent branding rules; Weirdcore thrives on visual inconsistency
Make the aesthetic feel ironic or humorous; the tone should be genuinely unsettling, not comedic

Aesthetic	Relationship
Dreamcore	Closest sibling; shares liminal spaces and surreal nostalgia but Dreamcore is subtler, quieter, and more passively unsettling where Weirdcore is aggressive and chaotic
Vaporwave	Both mine early internet and digital nostalgia; Vaporwave is ironic, consumer-culture-focused, and visually lush where Weirdcore is sinister and degraded
Liminal Spaces	Overlapping subject matter (empty hallways, pools, malls); Liminal Spaces is photographic documentation while Weirdcore actively distorts and corrupts these images
Y2K Futurism	Shares the late-90s/early-2000s digital source material; Y2K is optimistic, glossy, and forward-looking while Weirdcore treats the same era as a corrupted nightmare
Glitchcore	Near-synonym in some contexts; Glitchcore emphasizes the technical process of digital corruption while Weirdcore focuses on the emotional and psychological effect
Backrooms	Shares liminal space imagery and existential dread; Backrooms is more narrative and worldbuilding-focused while Weirdcore is purely visual and atmospheric
Cyberpunk	Both feature neon-on-dark palettes and digital dystopia; Cyberpunk is narrative and worldbuilt while Weirdcore is abstract and ambiguous
Early Cyber	Shares early internet visual DNA; Early Cyber celebrates the era with genuine enthusiasm while Weirdcore makes it feel haunted and corrupted

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>WEIRDCORE // LAYOUT_0x3F</title>
  <link href="https://fonts.googleapis.com/css2?family=VT323&family=Rubik+Glitch&family=Press+Start+2P&family=Comic+Neue:wght@300;400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --weird-corrupted: #E8E4D8;
      --weird-static: #A3A3A3;
      --weird-void: #0A0A0F;
      --weird-neon-green: #39FF14;
      --weird-glitch-magenta: #FF00FF;
      --weird-warning: #E8D44D;
      --weird-lavender: #B8A9C9;
      --weird-scan-blue: #00BFFF;
      --weird-flesh: #D4A0A0;
      --weird-error: #CC2233;
      --weird-compression: #C8B890;
      --weird-vhs: #6B2D8B;
    }

    body {
      font-family: 'Comic Neue', 'Comic Sans MS', cursive;
      font-size: 1rem;
      line-height: 1.6;
      color: var(--weird-corrupted);
      background: var(--weird-void);
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: none;
    }

    /* Scanline overlay */
    body::after {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      z-index: 9999;
      background:
        repeating-linear-gradient(
          0deg,
          rgba(57, 255, 20, 0.015) 0px,
          rgba(57, 255, 20, 0.015) 1px,
          transparent 1px,
          transparent 3px
        );
    }

    /* CRT vignette */
    body::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      z-index: 9998;
      background: radial-gradient(ellipse at center, transparent 50%, rgba(10,10,15,0.4) 100%);
    }

    /* --- Navigation --- */
    .nav {
      background: var(--weird-void);
      border-bottom: 2px solid var(--weird-neon-green);
      padding: 14px 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      z-index: 100;
    }

    .nav::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--weird-glitch-magenta);
      clip-path: polygon(0 0, 20% 0, 20% 100%, 35% 100%, 35% 0, 55% 0, 55% 100%, 70% 100%, 70% 0, 100% 0, 100% 100%, 0 100%);
    }

    .nav-logo {
      font-family: 'VT323', monospace;
      font-size: 1.2rem;
      color: var(--weird-neon-green);
      text-decoration: none;
      letter-spacing: 0.15em;
    }

    .nav-links a {
      font-family: 'VT323', monospace;
      font-size: 0.95rem;
      color: var(--weird-neon-green);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-left: 28px;
    }

    .nav-links a:hover {
      color: var(--weird-glitch-magenta);
      text-shadow: 1px 0 var(--weird-scan-blue), -1px 0 var(--weird-error);
    }

    /* --- Hero --- */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background:
        radial-gradient(ellipse at 25% 35%, rgba(107,45,139,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 65%, rgba(57,255,20,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(255,0,255,0.04) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-title {
      font-family: 'Rubik Glitch', sans-serif;
      font-size: clamp(2.5rem, 10vw, 6rem);
      font-weight: 400;
      color: var(--weird-neon-green);
      text-shadow:
        5px 0 var(--weird-glitch-magenta),
        -5px 0 var(--weird-scan-blue),
        0 0 60px rgba(57,255,20,0.25);
      position: relative;
      z-index: 10;
      animation: title-glitch 5s infinite steps(1);
    }

    @keyframes title-glitch {
      0%, 88% { text-shadow: 5px 0 var(--weird-glitch-magenta), -5px 0 var(--weird-scan-blue), 0 0 60px rgba(57,255,20,0.25); transform: translate(0,0) skewX(0deg); }
      89% { text-shadow: -8px 2px var(--weird-error), 6px -2px var(--weird-scan-blue); transform: translate(4px,-2px) skewX(-3deg); }
      91% { text-shadow: 10px 3px var(--weird-glitch-magenta), -5px -1px var(--weird-neon-green); transform: translate(-3px,3px) skewX(2deg); }
      93% { text-shadow: 5px 0 var(--weird-glitch-magenta), -5px 0 var(--weird-scan-blue), 0 0 60px rgba(57,255,20,0.25); transform: translate(0,0) skewX(0deg); }
    }

    .hero-sub {
      font-family: 'VT323', monospace;
      font-size: 1.3rem;
      color: var(--weird-static);
      margin-top: 28px;
      letter-spacing: 0.3em;
      position: relative;
      z-index: 10;
    }

    /* Floating Eye */
    .eye {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 3px solid var(--weird-neon-green);
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 30px rgba(57,255,20,0.15);
      animation: eye-float 6s ease-in-out infinite;
      z-index: 5;
    }

    .eye.eye-1 { top: 15%; left: 10%; animation-delay: 0s; }
    .eye.eye-2 { bottom: 20%; right: 8%; animation-delay: -2s; width: 70px; height: 70px; border-color: var(--weird-glitch-magenta); box-shadow: 0 0 30px rgba(255,0,255,0.15); }
    .eye.eye-3 { top: 60%; left: 75%; animation-delay: -4s; width: 50px; height: 50px; border-color: var(--weird-error); box-shadow: 0 0 20px rgba(204,34,51,0.15); }

    .eye::before {
      content: '';
      width: 40%;
      height: 40%;
      border-radius: 50%;
      background: currentColor;
    }

    .eye::after {
      content: '';
      position: absolute;
      width: 15%;
      height: 15%;
      border-radius: 50%;
      background: var(--weird-void);
    }

    .eye.eye-1 { color: var(--weird-neon-green); }
    .eye.eye-2 { color: var(--weird-glitch-magenta); }
    .eye.eye-3 { color: var(--weird-error); }

    @keyframes eye-float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      33% { transform: translateY(-15px) rotate(3deg); }
      66% { transform: translateY(10px) rotate(-2deg); }
    }

    /* --- System Warning --- */
    .warning {
      font-family: 'VT323', monospace;
      font-size: 1.2rem;
      color: var(--weird-neon-green);
      background: rgba(10,10,15,0.85);
      border-left: 3px solid var(--weird-error);
      padding: 16px 24px;
      margin: 60px auto;
      max-width: 600px;
      position: relative;
    }

    .warning::before {
      content: 'WARNING://';
      display: block;
      font-size: 0.85rem;
      color: var(--weird-error);
      margin-bottom: 6px;
      letter-spacing: 0.2em;
    }

    /* --- Content Grid --- */
    .content {
      max-width: 800px;
      margin: 0 auto;
      padding: 60px 32px;
    }

    .section-label {
      font-family: 'Press Start 2P', monospace;
      font-size: 0.65rem;
      color: var(--weird-error);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 32px;
    }

    .cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .card {
      background: rgba(232,228,216,0.04);
      border: 1px solid rgba(163,163,163,0.2);
      padding: 28px;
      position: relative;
      overflow: hidden;
      transform: rotate(-0.3deg);
    }

    .card:nth-child(2) { transform: rotate(0.4deg); }
    .card:nth-child(3) { transform: rotate(0.2deg); }
    .card:nth-child(4) { transform: rotate(-0.5deg); }

    .card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(57,255,20,0.02) 2px,
        rgba(57,255,20,0.02) 4px
      );
      pointer-events: none;
    }

    .card::after {
      content: '';
      position: absolute;
      top: -2px;
      left: 15%;
      width: 70%;
      height: 3px;
      background: var(--weird-glitch-magenta);
      opacity: 0;
      animation: card-glitch-bar 6s infinite steps(1);
    }

    .card:nth-child(2)::after { animation-delay: -1.5s; background: var(--weird-scan-blue); }
    .card:nth-child(3)::after { animation-delay: -3s; background: var(--weird-error); }
    .card:nth-child(4)::after { animation-delay: -4.5s; }

    @keyframes card-glitch-bar {
      0%, 92% { top: -2px; opacity: 0; }
      93% { top: 25%; opacity: 0.5; }
      95% { top: 60%; opacity: 0.3; }
      97% { top: 10%; opacity: 0.6; }
      100% { top: -2px; opacity: 0; }
    }

    .card h3 {
      font-family: 'Rubik Glitch', sans-serif;
      font-size: 1.1rem;
      font-weight: 400;
      color: var(--weird-neon-green);
      margin-bottom: 12px;
      text-shadow: 2px 0 var(--weird-glitch-magenta), -2px 0 var(--weird-scan-blue);
    }

    .card p {
      font-family: 'Comic Neue', cursive;
      font-size: 0.9rem;
      color: var(--weird-static);
      line-height: 1.5;
    }

    .card .tag {
      font-family: 'VT323', monospace;
      font-size: 0.85rem;
      color: var(--weird-warning);
      margin-top: 16px;
      display: inline-block;
    }

    /* --- Buttons --- */
    .button {
      display: inline-block;
      background: var(--weird-void);
      color: var(--weird-neon-green);
      border: 1px solid var(--weird-neon-green);
      padding: 10px 24px;
      font-family: 'VT323', monospace;
      font-size: 1.05rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      margin-top: 16px;
    }

    .button:hover {
      background: var(--weird-neon-green);
      color: var(--weird-void);
      text-shadow: 2px 0 var(--weird-glitch-magenta), -2px 0 var(--weird-scan-blue);
      animation: button-shake 0.15s infinite steps(1);
    }

    @keyframes button-shake {
      0% { transform: translate(0,0); }
      25% { transform: translate(-2px,1px); }
      50% { transform: translate(2px,-1px); }
      75% { transform: translate(-1px,-2px); }
      100% { transform: translate(1px,2px); }
    }

    /* --- Marquee Banner --- */
    .marquee-wrap {
      overflow: hidden;
      border-top: 1px solid rgba(57,255,20,0.2);
      border-bottom: 1px solid rgba(57,255,20,0.2);
      padding: 12px 0;
      margin: 60px 0;
    }

    .marquee {
      font-family: 'Press Start 2P', monospace;
      font-size: 0.55rem;
      color: var(--weird-error);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      white-space: nowrap;
      animation: scroll-left 20s linear infinite;
    }

    @keyframes scroll-left {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
    }

    /* --- Footer --- */
    .footer {
      text-align: center;
      padding: 60px 32px;
      border-top: 1px solid rgba(163,163,163,0.1);
    }

    .footer p {
      font-family: 'VT323', monospace;
      font-size: 0.95rem;
      color: rgba(163,163,163,0.4);
      letter-spacing: 0.2em;
    }

    .footer .blink {
      animation: blink 1.5s steps(1) infinite;
      color: var(--weird-neon-green);
    }

    @keyframes blink {
      0%, 50% { opacity: 1; }
      51%, 100% { opacity: 0; }
    }

    /* --- Responsive --- */
    @media (max-width: 640px) {
      .cards { grid-template-columns: 1fr; }
      .nav { padding: 12px 16px; }
      .nav-links a { margin-left: 16px; font-size: 0.8rem; }
      .content { padding: 40px 16px; }
      .warning { margin: 40px 16px; }
      .eye.eye-2, .eye.eye-3 { display: none; }
    }
  </style>
</head>
<body>
  <nav class="nav">
    <a href="#" class="nav-logo">SYS://WEIRD_0x3F</a>
    <div class="nav-links">
      <a href="#">VOID</a>
      <a href="#">MEMORY</a>
      <a href="#">EXIT?</a>
    </div>
  </nav>

  <header class="hero">
    <div class="eye eye-1"></div>
    <div class="eye eye-2"></div>
    <div class="eye eye-3"></div>
    <h1 class="hero-title">WEIRDCORE</h1>
    <div class="hero-sub">do you remember this place . . . you were never here</div>
  </header>

  <div class="warning">you are not supposed to be reading this. the file was marked for deletion on a date that has not occurred yet.</div>

  <main class="content">
    <div class="section-label">// RECOVERED_FILES</div>
    <div class="cards">
      <div class="card">
        <h3>Room 404</h3>
        <p>The hallway extends further than the building allows. The lights flicker at a frequency your eyes cannot track. You have been here before.</p>
        <span class="tag">[LOCATION: UNKNOWN]</span>
        <br>
        <a href="#" class="button">ENTER</a>
      </div>
      <div class="card">
        <h3>The Signal</h3>
        <p>A television displays static in a room with no power outlets. The static forms patterns if you watch long enough. Do not watch long enough.</p>
        <span class="tag">[STATUS: ACTIVE]</span>
        <br>
        <a href="#" class="button">RECEIVE</a>
      </div>
      <div class="card">
        <h3>Memory_03.jpg</h3>
        <p>This photograph was taken on a camera that does not exist, in a location that was demolished in 1998. The timestamp reads tomorrow.</p>
        <span class="tag">[CORRUPTION: 78%]</span>
        <br>
        <a href="#" class="button">RECOVER</a>
      </div>
      <div class="card">
        <h3>The Pool</h3>
        <p>Still water. No reflections. The depth gauge reads a negative number. Someone left a towel on a chair that is bolted to the ceiling.</p>
        <span class="tag">[DEPTH: -12m]</span>
        <br>
        <a href="#" class="button">DESCEND</a>
      </div>
    </div>

    <div class="marquee-wrap">
      <div class="marquee">/// THIS CONTENT HAS BEEN FLAGGED FOR REVIEW /// FILE ORIGIN: UNRESOLVED /// TIMESTAMP: ERR_OVERFLOW /// DO NOT DISTRIBUTE /// THIS CONTENT HAS BEEN FLAGGED FOR REVIEW ///</div>
    </div>

    <div class="warning">process terminated unexpectedly. 3 files were modified by an unknown user at 03:33:33. no login records exist for this session.</div>
  </main>

  <footer class="footer">
    <p>LAST MODIFIED: NEVER <span class="blink">_</span></p>
    <p style="margin-top: 12px; font-size: 0.8rem;">connection_status: unstable // user_count: 1 (unverified)</p>
  </footer>
</body>
</html>

This site is open source. Improve this page.