Letter Spacing Wave
A copy-paste text effects component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Text EffectsHTMLCSSany framework
Spacing
Copy into your project
HTML
<!-- Letter Spacing Wave — letter spacing oscillates in wave -->
<span class="nuda-ls-wave">Spacing</span>CSS
/* ── Letter Spacing Wave ─────────────────────────────────────
Customize:
--nuda-lsw-min : tightest spacing
--nuda-lsw-max : widest spacing
--nuda-lsw-speed : cycle duration
──────────────────────────────────────────────────────────── */
.nuda-ls-wave {
--nuda-lsw-min: 0.02em;
--nuda-lsw-max: 0.35em;
--nuda-lsw-speed: 2.5s;
display: inline-block;
font-size: 1.8rem;
font-weight: 700;
text-transform: uppercase;
animation: nuda-ls-wave var(--nuda-lsw-speed) ease-in-out infinite;
}
@keyframes nuda-ls-wave {
0%, 100% { letter-spacing: var(--nuda-lsw-min); }
50% { letter-spacing: var(--nuda-lsw-max); }
}
/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.nuda-ls-wave {
animation: none;
}
}How to use Letter Spacing Wave
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.