You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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
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
Related Aesthetics
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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>WEIRDCORE // LAYOUT_0x3F</title><linkhref="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:14px32px;
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(00,20%0,20%100%,35%100%,35%0,55%0,55%100%,70%100%,70%0,100%0,100%100%,0100%);
}
.nav-logo {
font-family:'VT323', monospace;
font-size:1.2rem;
color:var(--weird-neon-green);
text-decoration: none;
letter-spacing:0.15em;
}
.nav-linksa {
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-linksa:hover {
color:var(--weird-glitch-magenta);
text-shadow:1px0var(--weird-scan-blue),-1px0var(--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:5px0var(--weird-glitch-magenta),-5px0var(--weird-scan-blue),0060pxrgba(57,255,20,0.25);
position: relative;
z-index:10;
animation: title-glitch 5s infinite steps(1);
}
@keyframes title-glitch {
0%,88% { text-shadow:5px0var(--weird-glitch-magenta),-5px0var(--weird-scan-blue),0060pxrgba(57,255,20,0.25); transform:translate(0,0) skewX(0deg); }
89% { text-shadow:-8px2pxvar(--weird-error),6px-2pxvar(--weird-scan-blue); transform:translate(4px,-2px) skewX(-3deg); }
91% { text-shadow:10px3pxvar(--weird-glitch-magenta),-5px-1pxvar(--weird-neon-green); transform:translate(-3px,3px) skewX(2deg); }
93% { text-shadow:5px0var(--weird-glitch-magenta),-5px0var(--weird-scan-blue),0060pxrgba(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:0030pxrgba(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:0030pxrgba(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:0020pxrgba(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:16px24px;
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:60px32px;
}
.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:1fr1fr;
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; }
}
.cardh3 {
font-family:'Rubik Glitch', sans-serif;
font-size:1.1rem;
font-weight:400;
color:var(--weird-neon-green);
margin-bottom:12px;
text-shadow:2px0var(--weird-glitch-magenta),-2px0var(--weird-scan-blue);
}
.cardp {
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:10px24px;
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:2px0var(--weird-glitch-magenta),-2px0var(--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:12px0;
margin:60px0;
}
.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:60px32px;
border-top:1px solid rgba(163,163,163,0.1);
}
.footerp {
font-family:'VT323', monospace;
font-size:0.95rem;
color:rgba(163,163,163,0.4);
letter-spacing:0.2em;
}
.footer .blink {
animation: blink 1.5ssteps(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:12px16px; }
.nav-linksa { margin-left:16px; font-size:0.8rem; }
.content { padding:40px16px; }
.warning { margin:40px16px; }
.eye.eye-2, .eye.eye-3 { display: none; }
}
</style></head><body><navclass="nav"><ahref="#" class="nav-logo">SYS://WEIRD_0x3F</a><divclass="nav-links"><ahref="#">VOID</a><ahref="#">MEMORY</a><ahref="#">EXIT?</a></div></nav><headerclass="hero"><divclass="eye eye-1"></div><divclass="eye eye-2"></div><divclass="eye eye-3"></div><h1class="hero-title">WEIRDCORE</h1><divclass="hero-sub">do you remember this place . . . you were never here</div></header><divclass="warning">you are not supposed to be reading this. the file was marked for deletion on a date that has not occurred yet.</div><mainclass="content"><divclass="section-label">// RECOVERED_FILES</div><divclass="cards"><divclass="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><spanclass="tag">[LOCATION: UNKNOWN]</span><br><ahref="#" class="button">ENTER</a></div><divclass="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><spanclass="tag">[STATUS: ACTIVE]</span><br><ahref="#" class="button">RECEIVE</a></div><divclass="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><spanclass="tag">[CORRUPTION: 78%]</span><br><ahref="#" class="button">RECOVER</a></div><divclass="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><spanclass="tag">[DEPTH: -12m]</span><br><ahref="#" class="button">DESCEND</a></div></div><divclass="marquee-wrap"><divclass="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><divclass="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><footerclass="footer"><p>LAST MODIFIED: NEVER <spanclass="blink">_</span></p><pstyle="margin-top: 12px; font-size: 0.8rem;">connection_status: unstable // user_count: 1 (unverified)</p></footer></body></html>