Components
Marquee
One line of text cut off with an ellipsis, that scrolls to show the rest on hover or focus (of itself or of its row), or all the time. Only text that doesn't fit moves.
Import
import { Marquee } from '@rinzai/zen';Examples
Always
trigger="always" keeps it moving, for what's playing: to the end, a pause, and back.
API reference
<Marquee>
One line of text that's cut off with an ellipsis, and scrolls to show the rest: to the end, a pause, and back. Only text that doesn't fit moves. With trigger="hover" (the default) it moves while it, or the closest element marked data-zen-marquee-host (a row, a tile, a link), is hovered or holds focus; "always" keeps it moving, e.g. for what's playing. Stays an ellipsis for reduced motion. Set the type and colour with className.
| Prop | Type | Default |
|---|---|---|
trigger
| "always" | "hover" | hover |