Jitter
A copy-paste glitch & distortion component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Glitch & DistortionHTMLCSSany framework
JITTER
Copy into your project
HTML
<!-- Jitter — constant, tiny sub-pixel position noise. -->
<span class="nuda-glitch-jitter">JITTER</span>CSS
/* ── Jitter ──────────────────────────────────────────────────
Very small (<=0.5px) translate noise. It only moves position —
no opacity flashing — so it reads as a subtle tremor, not a strobe.
Customize:
--nuda-gj-speed : full jitter cycle duration
──────────────────────────────────────────────────────────── */
.nuda-glitch-jitter {
--nuda-gj-speed: 1.8s;
display: inline-block;
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 2.1rem;
font-weight: 900;
letter-spacing: 0.05em;
color: #e4ff54;
background: #09090b;
padding: 0.3rem 0.5rem;
animation: glitch-jitter-shake var(--nuda-gj-speed) steps(6) infinite;
}
@keyframes glitch-jitter-shake {
0%, 100% { transform: translate(0, 0); }
10% { transform: translate(0.5px, -0.5px); }
20% { transform: translate(-0.5px, 0.5px); }
30% { transform: translate(0.5px, 0.5px); }
40% { transform: translate(-0.5px, -0.5px); }
50% { transform: translate(0.5px, 0); }
60% { transform: translate(-0.5px, 0); }
70% { transform: translate(0, 0.5px); }
80% { transform: translate(0, -0.5px); }
90% { transform: translate(0.5px, -0.5px); }
}
/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.nuda-glitch-jitter { animation: none; transform: none; }
}How to use Jitter
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.