Effects
Neon Flicker Animation
A neon sign struggling to stay lit.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.neon-flicker {
transform: translate3d(90px, 138px, 0);
width: 300px;
height: 44px;
background: #00000000;
color: #e7e9ee;
font-size: 32px;
font-weight: 700;
animation: neon-flicker-anim 1400ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes neon-flicker-anim {
0% {
box-shadow: 0px 0px 24px 0px #22d3eeb0;
opacity: 1;
}
8% {
box-shadow: 0px 0px 6px 0px #22d3eeb0;
opacity: 0.4;
}
12% {
box-shadow: 0px 0px 24px 0px #22d3eeb0;
opacity: 1;
}
20% {
box-shadow: 0px 0px 21.333px 0px #22d3eeb0;
opacity: 0.7;
}
25% {
box-shadow: 0px 0px 19.667px 0px #22d3eeb0;
opacity: 1;
}
55% {
box-shadow: 0px 0px 9.667px 0px #22d3eeb0;
opacity: 1;
}
60% {
box-shadow: 0px 0px 8px 0px #22d3eeb0;
opacity: 0.5;
}
65% {
box-shadow: 0px 0px 24px 0px #22d3eeb0;
opacity: 1;
}
100% {
box-shadow: 0px 0px 24px 0px #22d3eeb0;
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.neon-flicker {
animation: none;
transition: none;
}
}Why it is built this way
The irregular timing is the whole effect. Evenly spaced flickers read as a blinking cursor; clustering two fast dips and then holding steady reads as a failing tube.
What it animates
2 properties across 2 CSS declarations. The bar shows when each one is moving.
opacitybox-shadowWhat it costs to run
Mixed: opacity runs on the compositor while box-shadow repaints. The compositor half is nearly free; the painted half is what to watch if you scale the element up or run several at once.
It runs for 1.40s across 15 keyframe stops, with every property moving over the same window.
A single linear curve on a text. Linear looks wrong on almost anything that starts and stops — but it is exactly right here, because a continuous loop that eases would visibly stutter at the seam where it repeats.
Accessibility
Nothing here hides content — opacity and box-shadow move over 1.40s and the element is visible throughout. The exported prefers-reduced-motion guard still silences it, which matters most for the looping ones: motion that never stops is the kind that makes people feel unwell.