A full-width band of words that drifts on its own, speeds up with scroll velocity and turns to run the way the page is scrolling. Tone, size, separator, speed, boost and direction are props. It stops when offscreen and stands still for reduced motion.
The import and the props worth knowing about, in one place.
import { Marquee1 } from "@/components/beste/component/marquee1";
<Marquee1 items={["Posters", "Talks", "Workshops", "Night print"]} />
<Marquee1
items={["Open daily", "Free entry", "Late on Fridays"]}
tone="dark" // "primary" (default) | "dark" | "light" | "outline"
size="sm" // "sm" | "md" (default) | "lg"
separator="dot" // "diamond" (default) | "dot" | "slash" | "none"
speed={0.6} // base drift, 1 is the default pace
boost={0.8} // how much scrolling speeds it up, 0 to 1
followScroll={false} // keep one direction whatever the scroll does
pauseOnHover
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
items* | string[] | — | Words or short phrases carried by the band |
speed | number | — | Base drift speed, 1 is the default pace |
boost | number | — | How much scrolling speeds the band up, 0 to 1 |
followScroll | boolean | — | Turn with the scroll: the band runs the way the page is scrolling |
reverse | boolean | — | Start running to the right instead of the left |
pauseOnHover | boolean | — | Pause while the pointer is over the band |
tone | "primary" | "dark" | "light" | "outline" | — | Accent band (default), dark band, light band or a hairline band on the page color |
size | "sm" | "md" | "lg" | — | Type size |
separator | "diamond" | "dot" | "slash" | "none" | — | Mark between items |
className | string | — |