Tilted Marquee
A copy-paste marquees & tickers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Marquees & TickersHTMLCSSany framework
NUDAUI · ZERO DEPS · COPY PASTE · NUDAUI · ZERO DEPS · COPY PASTE ·
Copy into your project
HTML
<div class="nuda-tiltmq">
<div class="nuda-tiltmq__track">
<span>NUDAUI · ZERO DEPS · COPY PASTE · </span>
<span>NUDAUI · ZERO DEPS · COPY PASTE · </span>
</div>
</div>CSS
.nuda-tiltmq {
overflow: hidden;
padding: 14px 0;
background: #e4ff54;
color: #09090b;
transform: rotate(-2.5deg);
border-radius: 6px;
}
.nuda-tiltmq__track {
display: flex;
width: max-content;
animation: nuda-tmq-scroll 14s linear infinite;
font-weight: 900;
letter-spacing: 0.04em;
}
@keyframes nuda-tmq-scroll { to { transform: translateX(-50%); } }How to use Tilted Marquee
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.