Data Display
Marquee
Infinitely scrolling row or column with reverse, vertical and pause-on-hover.
An infinitely scrolling row (or column) that repeats its children to fill a seamless loop. It supports a reversed direction, pause-on-hover, and a vertical orientation. Tune the speed and spacing with the --duration and --gap CSS variables via className.
Import
import { Marquee } from "@yuhuanowo/yunui";
Basic
Scrolling row
ReactNext.jsTailwindRadix
ReactNext.jsTailwindRadix
ReactNext.jsTailwindRadix
ReactNext.jsTailwindRadix
Reverse & pause on hover
Set reverse to scroll the other way, and pauseOnHover to stop the animation while the pointer is over it.
Reverse + pause on hover
VisionThinkingToolsAudio
VisionThinkingToolsAudio
VisionThinkingToolsAudio
VisionThinkingToolsAudio
Custom speed
Override --duration through className to slow the loop down or speed it up.
Slower loop
AlphaBetaGamma
AlphaBetaGamma
AlphaBetaGamma
AlphaBetaGamma
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| pauseOnHover | boolean | false | Pause the animation while hovered. |
| repeat | number | 4 | How many times to repeat the children to fill the loop. |
| reverse | boolean | — | Scroll in the opposite direction. |
| vertical | boolean | false | Scroll vertically instead of horizontally. |