Polaroid Stack
A copy-paste galleries & carousels component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Galleries & CarouselsHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-polstack">
<div class="nuda-polstack__card" style="--r:-8deg"><span></span></div>
<div class="nuda-polstack__card" style="--r:4deg"><span></span></div>
<div class="nuda-polstack__card" style="--r:-3deg"><span></span></div>
</div>CSS
.nuda-polstack__card {
position: absolute;
width: 80px;
height: 90px;
background: #fafafa;
border-radius: 3px;
padding: 6px 6px 14px;
box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
transform: rotate(var(--r, 0deg));
transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nuda-polstack:hover .nuda-polstack__card:nth-child(1) {
transform: rotate(-22deg) translate(-32px, -6px);
}
.nuda-polstack:hover .nuda-polstack__card:nth-child(2) {
transform: rotate(12deg) translate(32px, -6px);
}
.nuda-polstack:hover .nuda-polstack__card:nth-child(3) {
transform: translateY(-6px) scale(1.05);
}How to use Polaroid Stack
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.