Techniques
Falling katakana code-rain background
A pure-CSS column rain that drifts behind hero content. Use sparingly — one section, one rain layer.
.code-rain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(
to bottom,
transparent 0 14px,
rgba(0, 255, 65, 0.85) 14px 16px,
rgba(0, 255, 65, 0.35) 16px 22px,
transparent 22px 34px),
repeating-linear-gradient(to right,
transparent 0 11px,
rgba(0, 0, 0, 0.92) 11px 12px);
mix-blend-mode: screen;
animation: rain 8s linear infinite;
pointer-events: none;
mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 70%, transparent);
}
@keyframes rain { from { background-position-y: 0; } to { background-position-y: 220px; } }
Phosphor glow CTA
Buttons sit flat on black until hover, then leak phosphor light from below.
.btn-matrix {
background: #00FF41; color: #0A0A0A;
border: 1px solid #00FF41; border-radius: 0;
font-family: 'Source Code Pro', monospace;
font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
padding: 0 16px; height: 36px;
transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
background-color 120ms ease-out;
}
.btn-matrix:hover {
background: #26FF61;
box-shadow: 0 6px 20px rgba(0, 255, 65, 0.32),
0 0 0 1px rgba(0, 255, 65, 0.6);
}
.btn-matrix:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 255, 65, 0.45); }
Terminal-prompt heading
H1s wear a blinking caret, like a prompt waiting for the next command.
.h-prompt {
font-family: 'Source Code Pro', monospace;
color: #00FF41;
font-weight: 600;
letter-spacing: -0.02em;
}
.h-prompt::before { content: '> '; color: rgba(0, 255, 65, 0.55); }
.h-prompt::after {
content: '_';
display: inline-block;
margin-left: 0.15em;
animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }