A simple scrolling content with default settings. Hover to pause, drag to scroll manually.
<scrolling-content data-mobile-speed="40" data-desktop-speed="60">
<scrolling-track>
<div>🚀 Web Components</div>
<div>⚡ Lightning Fast</div>
<div>🎨 Fully Customizable</div>
<!-- Component automatically wraps content and duplicates it -->
</scrolling-track>
</scrolling-content>
<!-- Control gap with CSS -->
<style>
scrolling-content {
--scrolling-content-gap: 1rem;
}
</style>Perfect for showcasing client logos or partner brands.
High-speed scrolling for urgent announcements or quick updates.
Gentle, readable scrolling for important information.
Hover to pause, drag to scroll manually. Touch-friendly on mobile devices.
Different speeds for mobile and desktop with customizable breakpoints.
Seamless infinite scrolling with automatic content duplication.
Tiny file size with zero dependencies. Smooth animations that adapt to device refresh rates.
Control speed, gap, breakpoints, and styling through data attributes and CSS.
Drop-in web component that works with any framework or vanilla HTML.