<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AIWITH HAMZA — Neon Sign</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap" rel="stylesheet">
<style>
/* =============================================
ROOT SETUP
Pure black background — maximum contrast so
the neon glow has nothing competing with it.
Full viewport centering via flexbox.
============================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #0a0a0a;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Space Grotesk', sans-serif;
overflow: hidden;
}
/* =============================================
SCENE WRAPPER
Stacks signs vertically with breathing room.
============================================= */
.scene {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
padding: 4rem 2rem;
}
/* =============================================
BASE NEON TEXT STYLE
Bold weight + wide letter-spacing mimics
real glass neon tube signage.
text-transform: uppercase is essential for drama.
============================================= */
.neon {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
line-height: 1;
user-select: none;
position: relative;
display: inline-block;
}
/* =============================================
ORANGE NEON — color: #d97757
Word: "AIWITH"
6 layered text-shadow values build the bloom:
Layer 1 — 4px: white-hot tube core
Layer 2 — 12px: tight orange halo
Layer 3 — 28px: inner glow bloom
Layer 4 — 60px: mid-range diffusion
Layer 5 — 120px: wide atmospheric scatter
Layer 6 — 200px: distant ambient wash
============================================= */
.neon-orange {
font-size: clamp(3.5rem, 13vw, 10rem);
color: #d97757;
text-shadow:
0 0 4px #ffffff,
0 0 12px #d97757,
0 0 28px #d97757,
0 0 60px #d97757cc,
0 0 120px #d9775766,
0 0 200px #d9775533;
/* Pulse breathes the brightness up and down;
flicker adds random stutter cuts on top */
animation:
pulse-orange 3.2s ease-in-out infinite,
flicker-orange 0.12s steps(1) infinite;
}
/* =============================================
PURPLE NEON — color: #7B2FBE
Word: "HAMZA"
Same 6-layer shadow structure but violet tones.
Slightly lighter face color (#bf7fff) so the
white core reads clearly against the dark purple bloom.
============================================= */
.neon-purple {
font-size: clamp(4rem, 16vw, 12rem);
color: #bf7fff;
text-shadow:
0 0 4px #ffffff,
0 0 12px #bf7fff,
0 0 28px #7B2FBE,
0 0 60px #7B2FBEcc,
0 0 120px #7B2FBE66,
0 0 200px #7B2FBE33;
animation:
pulse-purple 2.7s ease-in-out infinite,
flicker-purple 0.09s steps(1) infinite;
}
/* =============================================
FLOOR REFLECTION — ORANGE
A blurred, flipped, low-opacity copy of the
orange word sits beneath it, simulating the
glow reflecting off a wet floor or dark surface.
pointer-events: none prevents interaction.
============================================= */
.reflection-orange {
font-size: clamp(3.5rem, 13vw, 10rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #d97757;
opacity: 0.10;
filter: blur(5px);
transform: scaleY(-0.35) translateY(-170%);
pointer-events: none;
position: absolute;
left: 0;
right: 0;
text-align: center;
text-shadow:
0 0 20px #d97757,
0 0 50px #d97757;
animation: pulse-orange 3.2s ease-in-out infinite;
}
/* =============================================
FLOOR REFLECTION — PURPLE
Same technique for the purple HAMZA word.
============================================= */
.reflection-purple {
font-size: clamp(4rem, 16vw, 12rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #bf7fff;
opacity: 0.10;
filter: blur(5px);
transform: scaleY(-0.35) translateY(-170%);
pointer-events: none;
position: absolute;
left: 0;
right: 0;
text-align: center;
text-shadow:
0 0 20px #7B2FBE,
0 0 50px #7B2FBE;
animation: pulse-purple 2.7s ease-in-out infinite;
}
/* =============================================
ORANGE PULSE KEYFRAMES
Slowly dims from full blazing brightness down
to a dark ember glow, then recovers.
Mimics gas pressure fluctuation in real neon tubes.
Duration: 3.2s — a slow, warm, organic breathe.
============================================= */
@keyframes pulse-orange {
0% {
text-shadow:
0 0 4px #fff,
0 0 12px #d97757,
0 0 28px #d97757,
0 0 60px #d97757cc,
0 0 120px #d9775766,
0 0 200px #d9775533;
color: #d97757;
}
45% {
text-shadow:
0 0 2px #fff8,
0 0 6px #d97757,
0 0 10px #d97757aa,
0 0 18px #d9775566,
0 0 32px #d9775533,
0 0 60px #d9775511;
color: #a05540; /* dims to a darker amber-orange */
}
55% {
text-shadow:
0 0 2px #fff8,
0 0 6px #d97757,
0 0 10px #d97757aa,
0 0 18px #d9775566,
0 0 32px #d9775533,
0 0 60px #d9775511;
color: #a05540;
}
100% {
text-shadow:
0 0 4px #fff,
0 0 12px #d97757,
0 0 28px #d97757,
0 0 60px #d97757cc,
0 0 120px #d9775766,
0 0 200px #d9775533;
color: #d97757;
}
}
/* =============================================
PURPLE PULSE KEYFRAMES
Snappier than orange (2.7s) with a double-dip
pattern — dims, flares briefly, dims again.
Gives purple a more electric, volatile character
vs the orange's warm slow burn.
============================================= */
@keyframes pulse-purple {
0% {
text-shadow:
0 0 4px #fff,
0 0 12px #bf7fff,
0 0 28px #7B2FBE,
0 0 60px #7B2FBEcc,
0 0 120px #7B2FBE66,
0 0 200px #7B2FBE33;
color: #bf7fff;
}
30% {
text-shadow:
0 0 2px #fff5,
0 0 5px #9b55cc,
0 0 12px #7B2FBE88,
0 0 22px #7B2FBE44,
0 0 40px #7B2FBE22,
0 0 70px #7B2FBE11;
color: #7040aa;
}
38% {
/* Brief flare-back to full brightness mid-cycle */
text-shadow:
0 0 4px #fff,
0 0 12px #bf7fff,
0 0 28px #7B2FBE,
0 0 60px #7B2FBEcc,
0 0 120px #7B2FBE66,
0 0 200px #7B2FBE33;
color: #bf7fff;
}
70% {
text-shadow:
0 0 2px #fff5,
0 0 5px #9b55cc,
0 0 12px #7B2FBE88,
0 0 22px #7B2FBE44,
0 0 40px #7B2FBE22,
0 0 70px #7B2FBE11;
color: #7040aa;
}
100% {
text-shadow:
0 0 4px #fff,
0 0 12px #bf7fff,
0 0 28px #7B2FBE,
0 0 60px #7B2FBEcc,
0 0 120px #7B2FBE66,
0 0 200px #7B2FBE33;
color: #bf7fff;
}
}
/* =============================================
ORANGE STUTTER FLICKER
Runs at 0.12s with steps(1) = instant jumps.
Most frames are opacity: 1 (nothing happens).
Only specific % triggers cause blackout cuts.
Because 0.12s is prime-ish vs the 3.2s pulse,
they desync over time — feels genuinely random.
============================================= */
@keyframes flicker-orange {
0% { opacity: 1; }
3% { opacity: 0.92; }
6% { opacity: 1; }
61% { opacity: 1; }
62% { opacity: 0.3; } /* sudden hard cut — brief blackout */
63% { opacity: 1; }
77% { opacity: 1; }
78% { opacity: 0.6; } /* partial tube dropout */
80% { opacity: 1; }
100% { opacity: 1; }
}
/* =============================================
PURPLE STUTTER FLICKER
Different trigger percentages from orange so
each sign stutters on its own rhythm —
they never flicker in sync (that would look fake).
0.09s cycle creates extra desynchronization.
============================================= */
@keyframes flicker-purple {
0% { opacity: 1; }
17% { opacity: 1; }
18% { opacity: 0.15; } /* nearly dead — hard blackout */
19% { opacity: 1; }
20% { opacity: 0.85; }
21% { opacity: 1; }
55% { opacity: 1; }
56% { opacity: 0.5; } /* partial voltage drop */
57% { opacity: 1; }
91% { opacity: 1; }
92% { opacity: 0.4; }
93% { opacity: 1; }
100% { opacity: 1; }
}
/* =============================================
THIN DIVIDER LINE
A barely-visible vertical white hairline between
the two signs. Compositional breathing element only.
============================================= */
.divider {
width: 1px;
height: 2.5rem;
background: linear-gradient(
to bottom,
transparent,
#ffffff15,
transparent
);
}
/* =============================================
TAGLINE
Ultra-faint white text below both signs.
Wide letter-spacing = understated broadcast feel.
Low opacity keeps it from stealing attention.
============================================= */
.tagline {
font-size: clamp(0.6rem, 1.5vw, 0.85rem);
color: #ffffff20;
letter-spacing: 0.5em;
text-transform: uppercase;
font-weight: 700;
margin-top: 0.5rem;
}
/* =============================================
CRT SCANLINES OVERLAY
Thin repeating horizontal bands across the
entire viewport. Simulates real neon's interaction
with glass and cathode-ray surfaces.
z-index: 10 places it above everything.
============================================= */
.scanlines {
position: fixed;
inset: 0;
background: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 3px,
#00000018 3px,
#00000018 4px
);
pointer-events: none;
z-index: 10;
}
/* =============================================
RADIAL VIGNETTE
Darkens the four corners and edges of the scene.
Draws the viewer's eye to the glowing center stage.
Uses the same #0a0a0a as body bg for seamless fade.
============================================= */
.vignette {
position: fixed;
inset: 0;
background: radial-gradient(
ellipse at center,
transparent 35%,
#0a0a0a80 75%,
#0a0a0a 100%
);
pointer-events: none;
z-index: 9;
}
</style>
</head>
<body>
<!-- CRT scanline texture layered over the entire scene -->
<div class="scanlines"></div>
<!-- Radial vignette darkens corners, focuses center -->
<div class="vignette"></div>
<!-- MAIN STAGE: all signs nested here -->
<div class="scene">
<!-- ==========================================
ORANGE NEON SIGN — "AIWITH"
Wrapped in a relative container so the
absolute-positioned reflection stays anchored.
=========================================== -->
<div style="position: relative; display: inline-block; text-align: center;">
<div class="neon neon-orange">AIWITH</div>
<!-- Blurred, flipped reflection simulates wet floor glow -->
<div class="reflection-orange" aria-hidden="true">AIWITH</div>
</div>
<!-- Thin compositional hairline between signs -->
<div class="divider"></div>
<!-- ==========================================
PURPLE NEON SIGN — "HAMZA"
Larger font size anchors the composition.
=========================================== -->
<div style="position: relative; display: inline-block; text-align: center;">
<div class="neon neon-purple">HAMZA</div>
<!-- Blurred, flipped reflection simulates wet floor glow -->
<div class="reflection-purple" aria-hidden="true">HAMZA</div>
</div>
<!-- Barely-visible subtitle below both signs -->
<div class="tagline">AI • with • hamza</div>
</div>
</body>
</html>
]]>
