Total chaos: spinning rays, CRT scanlines, glitch text, a wobbling player card.
Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.
See the CSS
@import url('https://fonts.googleapis.com/css2?family=Rubik+Glitch&family=VT323&display=block');
/* Neon Arcade */
html, body { overflow-x: clip; }
::selection { background: #ff00aa; color: #fff; }
body.zbr-page {
font-family: 'VT323', monospace;
font-size: 21px;
padding-bottom: 72px;
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><text y='32' font-size='32'>🔥</text></svg>") 20 20, auto;
}
/* spinning rays */
body.zbr-page::before {
content: ''; position: fixed; inset: -60%; z-index: -2;
background: repeating-conic-gradient(#ff00aa 0 10deg, #00ffee 10deg 20deg, #ffee00 20deg 30deg, #000 30deg 40deg);
animation: spin 40s linear infinite;
}
/* CRT scanlines */
body.zbr-page::after {
content: ''; position: fixed; inset: 0; z-index: 10; pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 4px);
animation: flicker .15s infinite;
}
/* marquee: full-width bar + text made of 2 identical halves */
html::before {
content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 44px; z-index: 11;
background: #ff00aa;
}
html::after {
content: '★ PLAYER 1 READY ★ INSERT COIN ★ FULL CSS ★ PLAYER 1 READY ★ INSERT COIN ★ FULL CSS ★ PLAYER 1 READY ★ INSERT COIN ★ FULL CSS ★ PLAYER 1 READY ★ INSERT COIN ★ FULL CSS ★ PLAYER 1 READY ★ INSERT COIN ★ FULL CSS ★ PLAYER 1 READY ★ INSERT COIN ★ FULL CSS ★ PLAYER 1 READY ★ INSERT COIN ★ FULL CSS ★ PLAYER 1 READY ★ INSERT COIN ★ FULL CSS ★ PLAYER 1 READY ★ INSERT COIN ★ FULL CSS ★ PLAYER 1 READY ★ INSERT COIN ★ FULL CSS ★ PLAYER 1 READY ★ INSERT COIN ★ FULL CSS ★ PLAYER 1 READY ★ INSERT COIN ★ FULL CSS ';
position: fixed; bottom: 0; left: 0; z-index: 12; white-space: nowrap;
color: #000; font: 28px/44px 'VT323', monospace;
animation: marquee 30s linear infinite;
}
.zbr-card {
background: #000;
backdrop-filter: none;
border: 4px solid #fff;
border-radius: 0;
box-shadow: 10px 10px 0 #ff00aa, -10px -10px 0 #00ffee;
}
.zbr-col { gap: 32px; }
/* the player card wobbles in 3D */
.zbr-box-profile, .cols-1 .zbr-card { animation: wobble 5s ease-in-out infinite; }
.zbr-box-profile::before, .cols-1 .zbr-card::before {
content: '👾'; display: block; text-align: center; font-size: 4.5rem; line-height: 1;
filter: drop-shadow(4px 4px 0 #ff00aa) drop-shadow(-4px -4px 0 #00ffee);
animation: bounce 1s ease-in-out infinite alternate;
}
.zbr-avatar { display: none; }
.zbr-name {
font-family: 'Rubik Glitch', system-ui; font-weight: 400; font-size: 2.5rem;
text-transform: uppercase; line-height: 1; overflow-wrap: anywhere;
text-shadow: 4px 0 #ff00aa, -4px 0 #00ffee;
animation: glitch 1.4s steps(2) infinite;
}
.zbr-bio {
background: #ffee00; color: #000; opacity: 1;
padding: 2px 12px; font-size: 1.3rem; transform: rotate(2deg);
}
.zbr-box-title {
font-family: 'Rubik Glitch', system-ui; font-weight: 400; font-size: 1.8rem;
text-transform: uppercase; color: #ffee00; text-shadow: 3px 3px 0 #ff00aa;
}
.zbr-link {
background: none; border: 0; border-radius: 0; padding: 4px 0;
font-size: 1.5rem; font-weight: 400; text-transform: uppercase; letter-spacing: 3px;
transition: letter-spacing .2s, color .2s;
}
.zbr-link::before { content: '> '; color: #ffee00; }
.zbr-link:nth-child(even) { color: #ff00aa; }
.zbr-link:hover { background: none; color: #00ffcc; letter-spacing: 8px; transform: none; }
.zbr-link:hover::after { content: '_'; animation: blink 1s steps(1) infinite; }
.zbr-text, .zbr-table, .zbr-comment-body { font-size: 1.25rem; }
.zbr-table th { color: #00ffcc; opacity: 1; font-weight: 400; text-transform: uppercase; }
.zbr-table th, .zbr-table td, .zbr-comment { border-color: #333; }
.zbr-online { color: #ffee00; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 0; image-rendering: pixelated; }
.zbr-friend:nth-child(4n+1) .zbr-noavatar { background: #ff00aa; }
.zbr-friend:nth-child(4n+2) .zbr-noavatar { background: #00b3a6; }
.zbr-friend:nth-child(4n+3) .zbr-noavatar { background: #c9b800; }
.zbr-friend:nth-child(4n) .zbr-noavatar { background: #6b21a8; }
.zbr-btn { background: #00ffcc; color: #000; border-radius: 0; font-size: 1.2rem; text-transform: uppercase; }
.zbr-btn:hover { background: #ffee00; filter: none; }
.zbr-views { color: #ffee00; opacity: 1; font-size: 1.4rem; }
.zbr-views::before { content: '[ '; }
.zbr-views::after { content: ' ]'; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes flicker { 50% { opacity: .85; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes bounce { to { transform: translateY(-12px) rotate(8deg); } }
@keyframes wobble {
0%, 100% { transform: perspective(900px) rotateX(6deg) rotateY(-10deg) rotate(-2deg); }
50% { transform: perspective(900px) rotateX(-5deg) rotateY(10deg) rotate(2deg); }
}
@keyframes glitch {
20% { transform: translate(-4px, 2px) skewX(10deg); }
40% { transform: translate(4px, -2px); clip-path: inset(10% 0 45% 0); }
60% { transform: translate(-2px, 0) skewX(-12deg); clip-path: none; }
80% { transform: translate(3px, 1px); }
}
