InfiniteMarquee NEW
A continuous, high-performance CSS-only scrolling marquee for logos, text, or testimonial cards.
Preview/Playground
Sarah
@sarah
This is absolutely incredible. The setup felt simple, and the final interaction looked polished right away.
John
@john
I'm at a loss for words. This is smooth, fast, and exactly the kind of detail our landing page needed.
Jack
@jack
I've never seen anything like this before. It makes the page feel alive without slowing anything down.
James
@james
The components dropped in cleanly, and the motion felt refined across desktop and mobile screens.
Jane
@jane
A clean, elegant, and powerful experience. It helped our product page feel more premium instantly.
Anna
@anna
Beautiful, elegant, and powerful. The animation quality feels intentional instead of distracting.
David
@david
Best investment we've made this year. Our team shipped a better interface with far less custom CSS.
Mike
@mike
Outstanding work! Highly recommended for teams that want delightful UI without a heavy runtime.
Lisa
@lisa
Beyond expectations. Simply beautiful, easy to customize, and stable enough for production docs.
Tom
@tom
A game changer for our team. The marquee gave our customer stories a much stronger visual rhythm.
Astro ---
import InfiniteMarquee from "@astroanimate/core/InfiniteMarquee";
---
<InfiniteMarquee
cardMode={true}
testimonials={[
{ name: "Sarah", handle: "@sarah", quote: "This is absolutely incredible.", img: "/avatars/sarah.jpg" },
{ name: "John", handle: "@john", quote: "I'm at a loss for words.", img: "/avatars/john.jpg" },
{ name: "Jack", handle: "@jack", quote: "I've never seen anything like this.", img: "/avatars/jack.jpg" }
]}
speed="28s"
cardWidth="330px"
/>
<InfiniteMarquee
cardMode={true}
testimonials={[
{ name: "Anna", handle: "@anna", quote: "Beautiful and powerful.", img: "/avatars/anna.jpg" },
{ name: "David", handle: "@david", quote: "Best investment we've made.", img: "/avatars/david.jpg" },
{ name: "Lisa", handle: "@lisa", quote: "Beyond expectations.", img: "/avatars/lisa.jpg" }
]}
speed="26s"
direction="right"
cardWidth="330px"
/>Installation
npm install @astroanimate/coreUsage
---
import InfiniteMarquee from "@astroanimate/core/InfiniteMarquee";
---
<InfiniteMarquee direction="left" speed="40s" fade={true}>
<div class="marquee-item">Company A</div>
<div class="marquee-item">Company B</div>
<div class="marquee-item">Company C</div>
</InfiniteMarquee>Renders a smoothly looping track of content that seamlessly wraps around the container.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
direction | "left" | "right" | "up" | "down" | "left" | Scroll direction |
speed | string | "30s" | Duration of one complete scroll cycle |
pauseOnHover | boolean | true | Pause animation on mouse hover |
gap | string | "2rem" | Spacing between items |
fade | boolean | true | Apply gradient fade masks to the edges |
cardMode | boolean | false | Enable built-in testimonial card renderer |
testimonials | Testimonial[] | [] | Array of data for cards ({name, handle, quote, img?}) |
Use When
- Displaying a continuous feed of partner logos, sponsors, or client brands
- Showcasing a carousel of bite-sized user reviews or testimonials
- Creating dynamic "ticker-tape" announcements
Avoid When
- Presenting dense, long-form reading material (moving text hurts reading comprehension)
- Nesting complex interactive elements (like forms or dropdowns) inside the moving track
Accessibility
- Pauses on hover automatically to allow users to read the content comfortably
-
Hides duplicated trailing track copies from screen readers
using
aria-hidden="true" -
Respects
prefers-reduced-motion: reduceby freezing the animation completely
Performance
- Zero JavaScript: The scrolling loop is powered entirely by CSS keyframe animations
- Server rendered content duplication for seamless loops
-
GPU accelerated with
transform
Credits
- Credit to @Barsan
