NotVeryHelpfulGroup.Com — Animated Logo
:root {
–pink: #ff2d95;
–orange: #ff8c00;
–yellow: #ffd700;
–lime: #39ff14;
–cyan: #00f5ff;
–purple: #bf00ff;
–blue: #4d7cff;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
font-family: system-ui, -apple-system, “Segoe UI”, Roboto, sans-serif;
overflow: hidden;
color: white;
}
/* ===== LOGO CONTAINER ===== */
.logo {
position: relative;
width: min(92vw, 720px);
aspect-ratio: 16 / 9;
display: grid;
place-items: center;
isolation: isolate;
}
/* Soft glowing ring behind everything */
.glow-ring {
position: absolute;
inset: 8%;
border-radius: 50%;
background: conic-gradient(
from 0deg,
var(–pink),
var(–orange),
var(–yellow),
var(–lime),
var(–cyan),
var(–blue),
var(–purple),
var(–pink)
);
filter: blur(28px);
opacity: 0.55;
animation: spin 18s linear infinite;
z-index: -2;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Main wordmark */
.wordmark {
position: relative;
z-index: 2;
text-align: center;
line-height: 0.95;
font-weight: 900;
letter-spacing: -0.03em;
font-size: clamp(2.4rem, 8vw, 4.8rem);
background: linear-gradient(
90deg,
var(–pink),
var(–orange),
var(–yellow),
var(–lime),
var(–cyan),
var(–blue),
var(–purple),
var(–pink)
);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbow-shift 6s linear infinite;
filter: drop-shadow(0 4px 0 rgba(0,0,0,0.25));
user-select: none;
}
@keyframes rainbow-shift {
to { background-position: 200% center; }
}
.wordmark .welcome,
.wordmark .tagline {
display: block;
font-size: 0.32em;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.9;
background: none;
-webkit-background-clip: initial;
background-clip: initial;
color: #fff;
filter: none;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.wordmark .welcome {
margin-bottom: 0.25em;
}
.wordmark .tagline {
margin-top: 0.3em;
}
.wordmark .com {
display: block;
font-size: 0.55em;
letter-spacing: 0.08em;
margin-top: 0.15em;
opacity: 0.95;
}
/* ===== CHARACTERS ===== */
.characters {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
.char {
position: absolute;
font-size: clamp(2.8rem, 7vw, 4.2rem);
line-height: 1;
filter: drop-shadow(0 6px 8px rgba(0,0,0,0.35));
transform-origin: center bottom;
}
/* Left – shrug guy */
.char-shrug {
left: 6%;
top: 22%;
animation: bounce-soft 2.8s ease-in-out infinite,
shrug 4.2s ease-in-out infinite;
}
/* Center – photographer */
.char-photo {
left: 50%;
top: 5%;
transform: translateX(-50%);
animation: bounce-soft 3.1s ease-in-out infinite 0.4s,
look-around 5s ease-in-out infinite;
}
/* Right – cracked/broken lightbulb */
.char-bulb {
right: 7%;
top: 24%;
animation: bounce-soft 2.6s ease-in-out infinite 0.7s,
wobble 3.8s ease-in-out infinite;
}
.char-bulb svg {
width: 1em;
height: 1em;
display: block;
overflow: visible;
}
@keyframes bounce-soft {
0%, 100% { translate: 0 0; }
50% { translate: 0 -14px; }
}
@keyframes shrug {
0%, 100% { rotate: 0deg; }
25% { rotate: -9deg; }
75% { rotate: 7deg; }
}
@keyframes look-around {
0%, 100% { rotate: 0deg; }
30% { rotate: -6deg; }
70% { rotate: 5deg; }
}
@keyframes wobble {
0%, 100% { rotate: 0deg; }
20% { rotate: 8deg; }
40% { rotate: -6deg; }
60% { rotate: 5deg; }
80% { rotate: -4deg; }
}
/* Speech bubbles */
.bubble {
position: absolute;
background: white;
color: #222;
font-size: clamp(0.7rem, 2vw, 1rem);
font-weight: 700;
padding: 0.35em 0.6em;
border-radius: 1.2em;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
animation: pop-float 3.5s ease-in-out infinite;
}
.bubble::after {
content: “”;
position: absolute;
bottom: -6px;
left: 50%;
width: 12px;
height: 12px;
background: white;
transform: translateX(-50%) rotate(45deg);
}
.bubble-1 {
left: 12%;
top: 6%;
animation-delay: 0.2s;
}
.bubble-2 {
left: 48%;
top: -2%;
transform: translateX(-50%);
animation-delay: 1.1s;
}
.bubble-3 {
right: 10%;
top: 8%;
animation-delay: 0.6s;
}
@keyframes pop-float {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.9; }
50% { transform: translateY(-10px) scale(1.08); opacity: 1; }
}
/* Floating punctuation marks */
.mark {
position: absolute;
font-size: clamp(2.2rem, 6vw, 3.4rem);
font-weight: 900;
line-height: 1;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
animation: float-mark 4s ease-in-out infinite;
user-select: none;
}
.mark-q {
left: 16%;
bottom: 26%;
color: #ff2d95;
rotate: -14deg;
animation-delay: 0s;
}
.mark-ex {
right: 14%;
bottom: 30%;
color: #39ff14;
rotate: 11deg;
animation-delay: 1.3s;
}
@keyframes float-mark {
0%, 100% { translate: 0 0; }
50% { translate: 0 -18px; }
}
/* Sparkles */
.sparkle {
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
box-shadow: 0 0 8px 2px rgba(255,255,255,0.8);
animation: twinkle 2.2s ease-in-out infinite;
}
.sparkle:nth-child(1) { top: 22%; left: 28%; animation-delay: 0s; }
.sparkle:nth-child(2) { top: 15%; right: 30%; animation-delay: 0.4s; }
.sparkle:nth-child(3) { bottom: 28%; left: 22%; animation-delay: 0.8s; }
.sparkle:nth-child(4) { bottom: 22%; right: 24%; animation-delay: 1.2s; }
.sparkle:nth-child(5) { top: 38%; left: 8%; animation-delay: 0.6s; }
.sparkle:nth-child(6) { top: 42%; right: 7%; animation-delay: 1.5s; }
@keyframes twinkle {
0%, 100% { opacity: 0.3; transform: scale(0.6); }
50% { opacity: 1; transform: scale(1.3); }
}
/* Subtle entrance */
.logo {
animation: logo-enter 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes logo-enter {
from {
opacity: 0;
transform: scale(0.85) translateY(30px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.glow-ring,
.wordmark,
.char,
.bubble,
.mark,
.sparkle,
.logo {
animation: none !important;
}
.wordmark {
background-position: 0 center;
}
}
/* Caption */
.caption {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.85rem;
opacity: 0.6;
letter-spacing: 0.04em;
text-align: center;
width: 90%;
}
…
?
lol
?
!
Welcome to the
NotVeryHelpful
Group
Never Knowingly Helpful
.Com
Pure CSS • Continuous playful motion • Reduced-motion friendly
NotVeryHelpfulGroup 