marquee scroll gallery oval mask infinite images hero section image gallery auto-scrolling brand showcase AI/tech product visual strip static image grids feel lifeless need continuous image scroll without JS want oval-masked gallery effect
Marquee Oval
Fetch snippet JSON:
curl https://webspire.de/snippets/masks/marquee-oval.json Background
Customize
Quick Start
<div class="marquee-oval"><div class="marquee-oval-track">...</div></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 864 bytes · 46 lines
- Custom Properties
-
--marquee-speed--marquee-gap--marquee-bg - Classes
-
.marquee-oval.marquee-oval-track
marquee scroll gallery oval mask infinite images
An infinite horizontal scroll strip with elliptical top/bottom masking and fade edges. Duplicate content to fill the track, then translateX(-50%) loops seamlessly.
Image gallery marquee
<div class="marquee-oval h-64" style="--marquee-bg: #0f172a">
<div class="marquee-oval-track">
<div class="h-64 w-44 shrink-0 rounded-xl bg-slate-700"></div>
<div class="h-64 w-44 shrink-0 rounded-xl bg-slate-600"></div>
<div class="h-64 w-44 shrink-0 rounded-xl bg-slate-500"></div>
<!-- Duplicate for seamless loop -->
<div class="h-64 w-44 shrink-0 rounded-xl bg-slate-700"></div>
<div class="h-64 w-44 shrink-0 rounded-xl bg-slate-600"></div>
<div class="h-64 w-44 shrink-0 rounded-xl bg-slate-500"></div>
</div>
</div>