Marquee
marqueeScrolls repeated content continuously in a configurable direction with pause controls.
Usage
Basic usage
The children scroll to the left in a seamless loop, and pauseOnHover pauses when hovering.
ReactVueSvelteSolidAngularQwik
tsx
<Marquee pauseOnHover>
{items.map((c) => (
<Chip key={c}>{c}</Chip>
))}
</Marquee>Icon wall (fade fades out)
fade Add mask to fade out at both ends, and add icon sub-items to make logo / icon wall look and feel.
tsx
<Marquee fade pauseOnHover gap="1.25rem">
{logos.map((Icon, i) => (
<LogoTile key={i}>
<Icon className="size-6" />
</LogoTile>
))}
</Marquee>Direction and speed
direction controls the direction, the bigger duration is, the slower it is.
ReactVueSvelteSolidAngularQwik
tsx
<Marquee direction="right" duration={30} fade>
{items.map((c) => (
<Chip key={c}>{c}</Chip>
))}
</Marquee>Vertical scrolling (vertical)
vertical rolls along the Y axis, and the height of the container needs to be fixed.
ReactVueSvelteSolidAngularQwik
tsx
<Marquee className="h-56" vertical fade pauseOnHover>
{items.map((c) => (
<Chip key={c}>{c}</Chip>
))}
</Marquee>When to use
Use Marquee to continuously loop logos, technology chips, or testimonials horizontally or vertically. Use AnimatedList for viewport-triggered entrances, or Sortable for user-controlled order.
Import
ts
import { Marquee } from "@hulianui/ui"Props
Inherits ComponentPropsWithoutRef<"div">.
| Name | Type | Default | Description |
|---|---|---|---|
| direction | "left"|"right" | "left" | Scroll direction; right reverses the animation. |
| duration | number | 40 | Seconds per cycle; larger is slower. |
| gap | string | "1rem" | CSS gap between items. |
| pauseOnHover | boolean | false | Pauses while hovered. |
| repeat | number | 4 | Copies of the content used to prevent gaps. |
| vertical | boolean | false | Uses vertical movement; left means up and right means down. |
| fade | boolean | false | Adds edge fade masks. |
| fadeWidth | string | "15%" | Fade-region CSS width. |
| ...div | ComponentPropsWithoutRef\<"div"\> | — | Forwarded props; className controls the viewport. |
Slots
| Slot | Type | Description |
|---|---|---|
| children * | ReactNode | Repeated scrolling content. |
Showcase controls use duration 20 and enable pause and fade for demonstration. The actual defaults are those listed above.
Usage notes
- Give horizontal marquees a width and vertical marquees a height to create a visible viewport.
- Increase
repeatwhen short content exposes a gap. - This is a CSS-only animation;
fadeWidthapplies only whenfadeis true.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
ReactVueSvelteSolidAngularQwik
<Marquee direction="left" duration={20} pauseOnHover={true} fade={true}>
{items}
</Marquee>