Horizontal Snap
A copy-paste scroll-driven component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Scroll-DrivenHTMLCSSany framework
Scroll →
Copy into your project
HTML
<!-- Horizontal scroll-snap gallery; active slide pops via view() -->
<div class="nuda-scrollsnap__row">
<div class="nuda-scrollsnap__slide">01</div>
<div class="nuda-scrollsnap__slide">02</div>
<div class="nuda-scrollsnap__slide">03</div>
</div>CSS
/* Horizontal Snap
A scroll-snap row where the centered slide scales up via an inline
view() timeline. scroll-snap + transform only (no layout writes). */
.nuda-scrollsnap__row {
display: flex;
gap: 0.7rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.nuda-scrollsnap__slide {
flex: 0 0 78%;
scroll-snap-align: center;
transform: scale(0.92);
animation: nuda-scrollsnap-pop linear both;
animation-timeline: view(inline);
animation-range: cover 30% cover 70%;
}
@keyframes nuda-scrollsnap-pop {
to { transform: scale(1); }
}
@supports not (animation-timeline: view()) {
.nuda-scrollsnap__slide { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.nuda-scrollsnap__slide {
animation: none;
animation-timeline: none;
transform: none;
}
}How to use Horizontal Snap
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.