Metalheart (also known as Depthcore or Trendwhore) is a futuristic aesthetic popular from the late 1990s to the early-mid 2000s, succeeding the Early Cyber/Cyberdelia styles of the mid-1990s. It is a darker and “edgier” offshoot of Y2K Futurism with a more abstract and mechanical feeling. The style is characterized by deformed abstract shapes – rendered as 3D metallic forms with bead-blast and chrome textures, or as 2D geometric flat shapes – presented alongside blurry dark backgrounds, futuristic UIs and fonts, minimalist iconography, abstract lines and lights, grids, and coding text. Over time, Metalheart evolved into the McBling/Vectordelia/UrBling vector graphics movement.
| Role | Colors |
|---|---|
| Base | Black, near-black, deep charcoal |
| Primary surface | Chrome silver, steel gray, metallic mid-tones |
| Neutral | White (used sparingly for highlights and text) |
| Accents | Blue, green, red, yellow – cold and saturated against dark backgrounds |
| Color | Hex (suggested) | Usage |
|---|---|---|
| Void Black | #050508, #0A0A0F |
Primary backgrounds, deep space |
| Dark Steel | #141418, #1A1A20 |
Secondary backgrounds, panels |
| Gunmetal | #2A2A32, #33333D |
Surface elements, card backgrounds |
| Bead-Blast Gray | #606068, #70707A |
Muted metallic surfaces, borders |
| Chrome Silver | #A0A0A8, #B8B8C0 |
Primary metallic surfaces, text |
| Bright Chrome | #D0D0D8, #E0E0E8 |
Metallic highlights, headings |
| Glint White | #F0F0F5, #FFFFFF |
Specular highlights, maximum contrast points |
| Circuit Blue | #0066CC, #0088FF |
Primary accent, tech elements, active states |
| Terminal Green | #00CC44, #00FF66 |
Code text, data readouts, matrix elements |
| Alert Red | #CC0033, #FF1144 |
Warning states, aggressive accents |
| Signal Yellow | #CCAA00, #FFCC11 |
Highlights, caution indicators |
| Deep Blue Glow | rgba(0, 102, 204, 0.3) |
Ambient glow, background light effects |
:root {
/* Dark base tones */
--mh-void: #050508;
--mh-black: #0a0a0f;
--mh-dark-steel: #141418;
--mh-gunmetal: #2a2a32;
--mh-gunmetal-light: #33333d;
/* Metallic tones */
--mh-bead-blast: #606068;
--mh-chrome: #a0a0a8;
--mh-chrome-bright: #d0d0d8;
--mh-chrome-light: #e0e0e8;
--mh-glint: #f0f0f5;
/* Accent colors */
--mh-blue: #0066cc;
--mh-blue-light: #0088ff;
--mh-green: #00cc44;
--mh-green-light: #00ff66;
--mh-red: #cc0033;
--mh-red-light: #ff1144;
--mh-yellow: #ccaa00;
--mh-yellow-light: #ffcc11;
/* Glow / transparency */
--mh-glow-blue: rgba(0, 102, 204, 0.3);
--mh-glow-green: rgba(0, 204, 68, 0.25);
--mh-glow-red: rgba(204, 0, 51, 0.25);
--mh-glow-yellow: rgba(204, 170, 0, 0.2);
--mh-glass: rgba(160, 160, 168, 0.06);
--mh-glass-border: rgba(160, 160, 168, 0.12);
/* Functional mappings */
--mh-bg-primary: var(--mh-void);
--mh-bg-secondary: var(--mh-dark-steel);
--mh-bg-surface: var(--mh-gunmetal);
--mh-text-primary: var(--mh-chrome-light);
--mh-text-secondary: var(--mh-chrome);
--mh-text-muted: var(--mh-bead-blast);
--mh-accent: var(--mh-blue);
--mh-border: var(--mh-gunmetal-light);
}
Metalheart typography is futuristic, technical, and mechanical:
| Font | Style | Usage |
|---|---|---|
| Orbitron | Geometric, square, tech-forward | Hero titles, display headings |
| Chakra Petch | Tech-angular, semi-condensed | Headlines, UI labels |
| Rajdhani | Light, technical, semi-condensed | Subheadings, navigation |
| Exo 2 | Geometric, futuristic sans | Headlines, section titles |
| Share Tech Mono | Monospaced, technical | Code overlays, data text, grid labels |
| Space Mono | Monospaced, editorial | Decorative code blocks, annotations |
| Inter | Clean, neutral, modern | Body text, paragraphs |
| IBM Plex Sans | Technical, precise | Body copy, data readouts |
| Bruno Ace | Futuristic, mechanical | Display headlines, branding |
| Audiowide | Wide, futuristic, mechanical | Large display text, hero titles |
/* Headlines */
h1, h2, h3 {
font-family: 'Chakra Petch', 'Exo 2', sans-serif;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--mh-chrome-light);
text-transform: uppercase;
}
/* Display / Hero text with metallic gradient */
.mh-display {
font-family: 'Orbitron', 'Audiowide', sans-serif;
font-size: clamp(2.5rem, 7vw, 6rem);
letter-spacing: 0.15em;
line-height: 1.05;
text-transform: uppercase;
background: linear-gradient(
180deg,
#f0f0f5 0%,
#a0a0a8 35%,
#606068 50%,
#a0a0a8 65%,
#d0d0d8 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Body text */
body {
font-family: 'Inter', 'IBM Plex Sans', sans-serif;
font-weight: 300;
letter-spacing: 0.02em;
line-height: 1.65;
color: var(--mh-text-secondary);
}
/* Technical label / UI text */
.mh-label {
font-family: 'Rajdhani', 'Chakra Petch', sans-serif;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--mh-bead-blast);
}
/* Decorative code / data overlay text */
.mh-code {
font-family: 'Share Tech Mono', 'Space Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.05em;
color: var(--mh-green);
opacity: 0.4;
line-height: 1.8;
}
/* Glowing accent text */
.mh-glow-text {
color: var(--mh-blue-light);
text-shadow:
0 0 8px var(--mh-glow-blue),
0 0 30px rgba(0, 102, 204, 0.15);
}
clip-path for non-rectangular section shapes/* The signature Metalheart blurred dark backdrop */
.mh-backdrop {
background: var(--mh-void);
position: relative;
overflow: hidden;
}
.mh-backdrop::before {
content: '';
position: absolute;
inset: -20%;
background:
radial-gradient(ellipse 40% 40% at 25% 35%, rgba(0, 102, 204, 0.08) 0%, transparent 70%),
radial-gradient(ellipse 30% 30% at 70% 55%, rgba(160, 160, 168, 0.04) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
}
/* 3D chrome surface simulation */
.mh-chrome-surface {
background: linear-gradient(
180deg,
#d0d0d8 0%,
#a0a0a8 20%,
#606068 45%,
#70707a 55%,
#b8b8c0 80%,
#e0e0e8 100%
);
border-radius: 4px;
}
/* Horizontal chrome band */
.mh-chrome-band {
background: linear-gradient(
90deg,
#606068 0%,
#a0a0a8 15%,
#d0d0d8 30%,
#e0e0e8 50%,
#d0d0d8 70%,
#a0a0a8 85%,
#606068 100%
);
height: 3px;
}
/* Bead-blast matte metal texture */
.mh-bead-blast {
background:
repeating-linear-gradient(
135deg,
transparent,
transparent 1px,
rgba(255, 255, 255, 0.02) 1px,
rgba(255, 255, 255, 0.02) 2px
),
linear-gradient(
180deg,
#606068 0%,
#505058 50%,
#5a5a62 100%
);
}
/* Metallic gradient text -- the Metalheart signature */
.mh-chrome-text {
background: linear-gradient(
180deg,
#f0f0f5 0%,
#b8b8c0 30%,
#606068 50%,
#a0a0a8 70%,
#e0e0e8 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Dark chrome text variant */
.mh-dark-chrome-text {
background: linear-gradient(
180deg,
#a0a0a8 0%,
#606068 40%,
#33333d 55%,
#606068 70%,
#a0a0a8 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Diagonal light streak accent */
.mh-light-streak {
position: absolute;
width: 200%;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(0, 136, 255, 0.0) 20%,
rgba(0, 136, 255, 0.6) 50%,
rgba(0, 136, 255, 0.0) 80%,
transparent 100%
);
transform: rotate(-15deg);
pointer-events: none;
}
/* Animated sweep effect */
@keyframes mh-streak-sweep {
0% { transform: rotate(-15deg) translateX(-100%); opacity: 0; }
40% { opacity: 1; }
100% { transform: rotate(-15deg) translateX(100%); opacity: 0; }
}
.mh-light-streak--animated {
animation: mh-streak-sweep 4s ease-in-out infinite;
}
/* Perspective wireframe grid overlay */
.mh-grid-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
rgba(0, 102, 204, 0.06) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0, 102, 204, 0.06) 1px,
transparent 1px
);
background-size: 60px 60px;
perspective: 600px;
transform: rotateX(60deg);
transform-origin: bottom center;
mask-image: linear-gradient(to top, rgba(0,0,0,0.4), transparent 70%);
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.4), transparent 70%);
pointer-events: none;
}
/* Flat grid overlay (no perspective) */
.mh-grid-flat {
position: absolute;
inset: 0;
background:
linear-gradient(
rgba(160, 160, 168, 0.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(160, 160, 168, 0.04) 1px,
transparent 1px
);
background-size: 40px 40px;
pointer-events: none;
}
/* Animated code-rain column (Matrix-inspired) */
.mh-code-rain {
position: absolute;
font-family: 'Share Tech Mono', monospace;
font-size: 0.6rem;
color: var(--mh-green);
opacity: 0.15;
writing-mode: vertical-rl;
line-height: 2;
letter-spacing: 0.3em;
overflow: hidden;
pointer-events: none;
}
/* Static data annotation at container corners */
.mh-data-tag {
position: absolute;
font-family: 'Share Tech Mono', monospace;
font-size: 0.55rem;
color: var(--mh-bead-blast);
opacity: 0.5;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mh-data-tag--top-left { top: 0.75rem; left: 1rem; }
.mh-data-tag--top-right { top: 0.75rem; right: 1rem; }
.mh-data-tag--bottom-left { bottom: 0.75rem; left: 1rem; }
.mh-data-tag--bottom-right { bottom: 0.75rem; right: 1rem; }
.mh-panel {
background: linear-gradient(
160deg,
rgba(42, 42, 50, 0.85) 0%,
rgba(20, 20, 24, 0.95) 100%
);
border: 1px solid var(--mh-glass-border);
border-radius: 2px;
padding: 2rem;
position: relative;
overflow: hidden;
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Angular clip variant (non-rectangular) */
.mh-panel--clipped {
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
/* Top accent line */
.mh-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(
90deg,
var(--mh-blue) 0%,
var(--mh-blue-light) 30%,
transparent 100%
);
}
/* Corner bracket decorations */
.mh-panel::after {
content: '';
position: absolute;
top: 8px;
right: 8px;
width: 16px;
height: 16px;
border-top: 1px solid var(--mh-bead-blast);
border-right: 1px solid var(--mh-bead-blast);
opacity: 0.4;
pointer-events: none;
}
/* Abstract metallic blob shape using border-radius deformation */
.mh-abstract-shape {
width: 300px;
height: 300px;
border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
background: linear-gradient(
135deg,
#e0e0e8 0%,
#a0a0a8 25%,
#606068 50%,
#33333d 75%,
#1a1a20 100%
);
box-shadow:
0 0 60px rgba(0, 0, 0, 0.5),
inset 0 -20px 40px rgba(0, 0, 0, 0.3),
inset 0 20px 40px rgba(255, 255, 255, 0.1);
position: relative;
}
/* Glossy highlight on the shape */
.mh-abstract-shape::before {
content: '';
position: absolute;
top: 10%;
left: 15%;
width: 40%;
height: 35%;
border-radius: 50%;
background: radial-gradient(
ellipse,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.05) 60%,
transparent 100%
);
transform: rotate(-20deg);
}
/* Animated shape morphing */
@keyframes mh-morph {
0% { border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%; }
25% { border-radius: 56% 42% 28% 72% / 48% 56% 42% 42%; }
50% { border-radius: 28% 72% 42% 56% / 56% 28% 48% 42%; }
75% { border-radius: 72% 28% 56% 42% / 42% 48% 42% 56%; }
100% { border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%; }
}
.mh-abstract-shape--animated {
animation: mh-morph 12s ease-in-out infinite;
}
/* Blue accent glow for interactive elements */
.mh-glow-blue {
box-shadow:
0 0 8px var(--mh-glow-blue),
0 0 24px rgba(0, 102, 204, 0.12);
}
/* Green data/terminal glow */
.mh-glow-green {
box-shadow:
0 0 8px var(--mh-glow-green),
0 0 24px rgba(0, 204, 68, 0.1);
}
/* Red alert glow */
.mh-glow-red {
box-shadow:
0 0 8px var(--mh-glow-red),
0 0 24px rgba(204, 0, 51, 0.1);
}
/* Neon accent line (horizontal divider) */
.mh-accent-line {
height: 1px;
background: linear-gradient(
90deg,
transparent,
var(--mh-blue) 15%,
var(--mh-blue-light) 50%,
var(--mh-blue) 85%,
transparent
);
box-shadow: 0 0 10px var(--mh-glow-blue);
}
.mh-button {
display: inline-block;
padding: 0.6rem 2rem;
border: 1px solid var(--mh-bead-blast);
border-radius: 2px;
background: linear-gradient(
180deg,
rgba(96, 96, 104, 0.3) 0%,
rgba(42, 42, 50, 0.6) 100%
);
color: var(--mh-chrome);
font-family: 'Rajdhani', 'Chakra Petch', sans-serif;
font-size: 0.8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 2px 8px rgba(0, 0, 0, 0.4);
transition: all 0.2s ease;
}
.mh-button:hover {
border-color: var(--mh-blue);
color: var(--mh-chrome-light);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 0 12px var(--mh-glow-blue),
0 2px 8px rgba(0, 0, 0, 0.4);
}
/* Sweep highlight on hover */
.mh-button::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.06),
transparent
);
transition: left 0.4s ease;
}
.mh-button:hover::after {
left: 100%;
}
/* Clipped-corner button variant */
.mh-button--clipped {
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
border-radius: 0;
}
Physical Metalheart materials and their web equivalents:
| Physical Material | Web Equivalent |
|---|---|
| Chrome / polished metal | Multi-stop silver linear gradient with specular highlight band |
| Bead-blasted metal | Matte silver-gray with fine repeating-linear-gradient noise texture |
| Deformed 3D metal shapes | Organic border-radius deformation + metallic gradient + inset shadows |
| Dark blurred background | Near-black base + low-opacity radial-gradient blobs + filter: blur() |
| Wireframe grid | CSS grid lines via background with linear-gradient, optionally perspective-transformed |
| Lens flare / light streaks | Thin, rotated gradient elements with bright center and transparent edges |
| Terminal / coding text | Monospaced font, green tint, low opacity, used as decorative overlay |
| Futuristic UI panels | Dark glass panels with angular borders, accent lines, corner brackets |
| Geometric flat shapes | Hard-edged clip-path polygons or SVG shapes with flat metallic fills |
| Abstract light effects | Multiple overlapping radial-gradient layers with colored glow at low opacity |
The following media and creators define the Metalheart visual language:
| Aesthetic | Relationship to Metalheart |
|---|---|
| Y2K Futurism | Parent aesthetic; Metalheart is the darker, more abstract offshoot |
| Early Cyber | Predecessor; mid-1990s digital aesthetic that Metalheart succeeded |
| Cyberdelic | Predecessor; psychedelic digital art that fed into Metalheart’s abstract forms |
| Chromecore | Sibling; shares chrome textures but is brighter, more consumer-product oriented |
| Abstract Tech | Related; shares abstract digital motifs and dark backgrounds |
| Cybersigilism | Related; shares angular, dark, mechanical design language |
| Corporate Grunge | Related; shares dark, textured, industrial design sensibility |
| Cyberpunk | Related; shares dystopian darkness and technological emphasis |
| Dark Aero | Related; shares dark metallic surfaces and technological heaviness |
| Hexatron | Related; shares geometric precision and dark technological futurism |
| Hipness Purgatory | Related; shares early-2000s digital design culture context |
| McBling | Successor; Metalheart evolved into McBling’s vector graphics movement |
| Vectorheart | Sibling; the 2D flat-shape counterpart to Metalheart’s 3D forms |
| Vectorbloom | Related; organic vector art that emerged from the same design communities |
| UrBling | Successor; urban-influenced vector graphics that evolved from Metalheart |
| Nu-Metal | Related; shares aggressive, dark, mechanical aesthetic sensibility |
| Silicon Dreams | Related; shares digital futurism and technological abstraction |
| Gen X Soft Club | Related; overlapping era, different tonal approach |
| 90s Cool | Related; shares the pre-Y2K technological coolness |
| Med-Tech Visions | Related; shares clinical, technological precision |
| Webcore | Related; shares early web-era digital design characteristics |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metalheart Page</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Chakra+Petch:wght@400;600&family=Rajdhani:wght@400;500;600&family=Inter:wght@300;400&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<style>
:root {
--mh-void: #050508;
--mh-black: #0a0a0f;
--mh-dark-steel: #141418;
--mh-gunmetal: #2a2a32;
--mh-bead-blast: #606068;
--mh-chrome: #a0a0a8;
--mh-chrome-bright: #d0d0d8;
--mh-chrome-light: #e0e0e8;
--mh-glint: #f0f0f5;
--mh-blue: #0066cc;
--mh-blue-light: #0088ff;
--mh-green: #00cc44;
--mh-glow-blue: rgba(0, 102, 204, 0.3);
--mh-glass-border: rgba(160, 160, 168, 0.12);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--mh-void);
color: var(--mh-chrome);
font-family: 'Inter', sans-serif;
font-weight: 300;
letter-spacing: 0.02em;
line-height: 1.65;
min-height: 100vh;
overflow-x: hidden;
}
h1, h2, h3 {
font-family: 'Chakra Petch', sans-serif;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mh-chrome-light);
}
/* Hero section with blurred dark background */
.hero {
text-align: center;
padding: 8rem 2rem 6rem;
position: relative;
overflow: hidden;
}
/* Blurred ambient light blobs */
.hero::before {
content: '';
position: absolute;
inset: -20%;
background:
radial-gradient(ellipse 35% 35% at 30% 40%, rgba(0, 102, 204, 0.08) 0%, transparent 70%),
radial-gradient(ellipse 25% 25% at 65% 55%, rgba(160, 160, 168, 0.04) 0%, transparent 60%);
filter: blur(40px);
pointer-events: none;
}
/* Grid overlay */
.hero::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0, 102, 204, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 102, 204, 0.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 60% 60% at center, rgba(0,0,0,0.3), transparent);
-webkit-mask-image: radial-gradient(ellipse 60% 60% at center, rgba(0,0,0,0.3), transparent);
pointer-events: none;
}
.hero h1 {
font-family: 'Orbitron', sans-serif;
font-size: clamp(2.5rem, 7vw, 5.5rem);
letter-spacing: 0.15em;
background: linear-gradient(
180deg,
#f0f0f5 0%,
#a0a0a8 35%,
#606068 50%,
#a0a0a8 65%,
#d0d0d8 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 1;
}
.hero p {
margin-top: 1.5rem;
font-size: 1rem;
color: var(--mh-bead-blast);
letter-spacing: 0.15em;
text-transform: uppercase;
font-family: 'Rajdhani', sans-serif;
position: relative;
z-index: 1;
}
/* Accent line divider */
.accent-line {
width: 35%;
margin: 2.5rem auto;
border: none;
height: 1px;
background: linear-gradient(
90deg,
transparent,
var(--mh-blue) 15%,
var(--mh-blue-light) 50%,
var(--mh-blue) 85%,
transparent
);
box-shadow: 0 0 10px var(--mh-glow-blue);
position: relative;
z-index: 1;
}
section {
max-width: 900px;
margin: 0 auto;
padding: 4rem 2rem;
position: relative;
z-index: 1;
}
/* Angular UI panel */
.panel {
background: linear-gradient(
160deg,
rgba(42, 42, 50, 0.85) 0%,
rgba(20, 20, 24, 0.95) 100%
);
border: 1px solid var(--mh-glass-border);
border-radius: 2px;
padding: 2.5rem;
position: relative;
overflow: hidden;
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Top accent bar on panel */
.panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(
90deg,
var(--mh-blue) 0%,
var(--mh-blue-light) 30%,
transparent 100%
);
}
/* Corner bracket decoration */
.panel::after {
content: '';
position: absolute;
top: 8px;
right: 8px;
width: 14px;
height: 14px;
border-top: 1px solid var(--mh-bead-blast);
border-right: 1px solid var(--mh-bead-blast);
opacity: 0.35;
}
/* Data annotation tag */
.data-tag {
font-family: 'Share Tech Mono', monospace;
font-size: 0.55rem;
color: var(--mh-bead-blast);
opacity: 0.45;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Decorative abstract metallic shape */
.abstract-shape {
position: fixed;
width: 250px;
height: 250px;
border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
background: linear-gradient(
135deg,
#d0d0d8 0%,
#a0a0a8 25%,
#606068 50%,
#33333d 75%,
#141418 100%
);
opacity: 0.08;
filter: blur(2px);
pointer-events: none;
z-index: 0;
top: 15%;
right: -5%;
animation: morph 12s ease-in-out infinite;
}
@keyframes morph {
0% { border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%; }
50% { border-radius: 56% 42% 28% 72% / 48% 56% 42% 42%; }
100% { border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%; }
}
</style>
</head>
<body>
<!-- Decorative abstract shape -->
<div class="abstract-shape"></div>
<div class="hero">
<h1>Title Here</h1>
<hr class="accent-line">
<p>Subtitle with mechanical precision</p>
<span class="data-tag" style="position: absolute; bottom: 2rem; right: 2rem;">sys.ref // 001.0a</span>
</div>
<section>
<div class="panel">
<span class="data-tag" style="margin-bottom: 1rem; display: block;">module :: overview</span>
<h2>Section Heading</h2>
<p style="margin-top: 1rem;">Content rendered on a dark angular panel with chrome metallic accents, grid overlays, and the mechanical precision of the Metalheart aesthetic.</p>
</div>
</section>
</body>
</html>