Effects
Glitch Animation
Jitters and shifts hue like a corrupted signal.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.glitch {
transform: translate3d(90px, 138px, 0);
width: 300px;
height: 44px;
background: #00000000;
color: #e7e9ee;
font-size: 32px;
font-weight: 700;
animation: glitch-anim 800ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes glitch-anim {
0% {
transform: translate3d(90px, 138px, 0);
filter: none;
}
10% {
transform: translate3d(84px, 138px, 0);
filter: hue-rotate(90deg);
}
20% {
transform: translate3d(96px, 138px, 0);
filter: hue-rotate(-60deg);
}
30% {
transform: translate3d(86px, 138px, 0);
filter: hue-rotate(45deg);
}
40% {
transform: translate3d(94px, 138px, 0);
filter: hue-rotate(22.5deg);
}
50% {
transform: translate3d(90px, 138px, 0);
filter: none;
}
100% {
transform: translate3d(90px, 138px, 0);
filter: none;
}
}
@media (prefers-reduced-motion: reduce) {
.glitch {
animation: none;
transition: none;
}
}Why it is built this way
Offset and hue-rotate together, both in short irregular bursts. Keeping the displacement to a few pixels is what stops it reading as broken layout instead of a deliberate effect.
What it animates
2 properties across 2 CSS declarations. The bar shows when each one is moving.
filtertransformWhat it costs to run
Filter and x are handled by the compositor: no layout, no repaint, and the work can run off the main thread. This is the cheap end of CSS animation, which is why it stays smooth on a slow phone where other properties will not.
It runs for 0.80s across 13 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 — filter and x move over 0.80s 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.