Marquee Components
Two variants available: Static marquee with pause-on-hover, or interactive marquee with click-and-drag control. Both feature seamless infinite loop animation.
Static Marquee
Pure CSS implementation with zero dependencies. Automatically scrolls and pauses when users hover to read content. Lightweight and performant.
Testimonials Marquee
Showcase customer reviews with an elegant scrolling animation. Hover to pause and read the testimonials.
"These components saved us weeks of development time. Absolutely brilliant!"
"Clean, performant, and beautifully designed. Exactly what we needed."
"The TypeScript support and documentation are top-notch. Highly recommend!"
"Production-ready components that just work. Our team loves them!"
"Responsive, accessible, and easy to customise. Perfect for our projects."
"These components saved us weeks of development time. Absolutely brilliant!"
"Clean, performant, and beautifully designed. Exactly what we needed."
"The TypeScript support and documentation are top-notch. Highly recommend!"
"Production-ready components that just work. Our team loves them!"
"Responsive, accessible, and easy to customise. Perfect for our projects."
"These components saved us weeks of development time. Absolutely brilliant!"
"Clean, performant, and beautifully designed. Exactly what we needed."
"The TypeScript support and documentation are top-notch. Highly recommend!"
"Production-ready components that just work. Our team loves them!"
"Responsive, accessible, and easy to customise. Perfect for our projects."
"These components saved us weeks of development time. Absolutely brilliant!"
"Clean, performant, and beautifully designed. Exactly what we needed."
"The TypeScript support and documentation are top-notch. Highly recommend!"
"Production-ready components that just work. Our team loves them!"
"Responsive, accessible, and easy to customise. Perfect for our projects."
View Code Example
<script>
import Marquee from '$lib/components/Marquee.svelte';
const testimonials = [
{
name: 'Sarah Chen',
quote: 'Amazing components!',
role: 'Designer'
},
// ... more testimonials
];
</script>
<Marquee pauseOnHover={true} duration={60}>
{#each testimonials as testimonial}
<div class="testimonial-card">
<p>{testimonial.quote}</p>
<strong>{testimonial.name}</strong>
</div>
{/each}
</Marquee>Company Logos
Display partner logos or brand names with a faster scrolling speed. Clean and minimal presentation.
View Code Example
<Marquee pauseOnHover={true} duration={20}>
{#each companies as company}
<div class="logo-card">{company}</div>
{/each}
</Marquee>Features Banner
Scrolling from right to left with feature badges. Demonstrates direction customisation.
View Code Example
<Marquee pauseOnHover={true} reverse={true} duration={40}>
{#each features as feature}
<div class="feature-badge">{feature}</div>
{/each}
</Marquee>Interactive Marquee
Click-and-drag control with momentum scrolling. Built with pure Svelte and native DOM APIs for smooth physics-based animations. Users can control speed and direction by dragging.
Product Showcase
Drag left or right to browse products at your own pace. Release to continue scrolling in that direction.
Smartwatch
Headphones
Laptop
Smartphone
Monitor
Keyboard
Smartwatch
Headphones
Laptop
Smartphone
Monitor
Keyboard
View Code Example
<script>
import MarqueeDraggable from '$lib/components/MarqueeDraggable.svelte';
const products = [
{ emoji: '⌚', name: 'Smartwatch' },
{ emoji: '🎧', name: 'Headphones' },
// ... more products
];
</script>
<MarqueeDraggable duration={30} dragMomentum={true}>
{#each products as product}
<div class="product-card">
<div class="product-emoji">{product.emoji}</div>
<p class="product-name">{product.name}</p>
</div>
{/each}
</MarqueeDraggable>Customer Testimonials
Drag to pause and read testimonials. Slower animation speed for better readability.
"The drag interaction is incredibly smooth and intuitive!"
"Users love being able to control the marquee speed themselves."
"Easy to implement and the momentum feels natural."
"Perfect for showcasing content in an engaging way!"
"The drag interaction is incredibly smooth and intuitive!"
"Users love being able to control the marquee speed themselves."
"Easy to implement and the momentum feels natural."
"Perfect for showcasing content in an engaging way!"
View Code Example
<MarqueeDraggable duration={50} dragMomentum={true}>
{#each testimonials as testimonial}
<div class="testimonial-card">
<div class="avatar">{testimonial.avatar}</div>
<p class="quote">"{testimonial.quote}"</p>
<div class="author">
<strong>{testimonial.name}</strong>
<span class="role">{testimonial.role}</span>
</div>
</div>
{/each}
</MarqueeDraggable>Features Banner
Fast-scrolling feature badges. Starts scrolling right, drag to change direction.
View Code Example
<MarqueeDraggable duration={20} reverse={true} dragMomentum={true}>
{#each features as feature}
<div class="feature-badge">{feature}</div>
{/each}
</MarqueeDraggable>Choosing the Right Variant
Static Marquee
- Dependencies: Zero - pure CSS
- Interaction: Pause on hover
- Performance: Extremely lightweight
- Best for: Simple scrolling content, logos, testimonials
- File size: ~2KB
Interactive Marquee
- Dependencies: None - pure Svelte
- Interaction: Click-and-drag control with momentum
- Performance: GPU-accelerated with requestAnimationFrame
- Best for: Product showcases, interactive galleries
- File size: ~8KB
Features
Infinite Loop
Seamless continuous scrolling with perfect loop animation
Pause on Hover
Static variant pauses when users hover to read content
Click & Drag
Interactive variant lets users control speed and direction by dragging
Direction Control
Scroll left or right with the reverse prop
Configurable Speed
Adjust scrolling speed with duration prop
GPU Accelerated
Smooth 60fps animation using CSS transforms
Quick Start Guide
Choose Your Variant
Use Marquee.svelte for simple hover-to-pause functionality, or MarqueeDraggable.svelte for interactive click-and-drag control.
Copy the Component
Copy your chosen component from src/lib/components/ to your project. Both components
are pure Svelte with no external dependencies required.
Configure & Use
Both components accept duration and reverse props. Static marquee
has pauseOnHover, Interactive has dragEnabled and dragMomentum.