Scroll Rotate
A copy-paste scroll-driven component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Scroll-DrivenHTMLCSSany framework
Scroll the panel
and the badge spins
in lockstep with
your scroll position
— pure CSS.
Copy into your project
HTML
<!-- Badge rotates with scroll progress (CSS only) -->
<div class="nuda-scrollrot__stage">
<div class="nuda-scrollrot__mark"></div>
</div>CSS
/* Scroll Rotate
An element rotates a full turn across the scroll range using a
scroll() timeline. transform: rotate only. */
.nuda-scrollrot__stage {
display: flex;
align-items: center;
justify-content: center;
}
.nuda-scrollrot__mark {
transform: rotate(0deg);
animation: nuda-scrollrot-spin linear;
animation-timeline: scroll(nearest block);
}
@keyframes nuda-scrollrot-spin {
to { transform: rotate(360deg); }
}
@supports not (animation-timeline: scroll()) {
.nuda-scrollrot__mark { transform: rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
.nuda-scrollrot__mark {
animation: none;
animation-timeline: none;
transform: rotate(45deg);
}
}How to use Scroll Rotate
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.