Marquee
Use Marquee for decorative rows such as logos or short badges. It respects reduced motion settings.
Source
LLM docs
Package
Examples
6
Properties
38
Basics
The children repeat seamlessly;
duration controls one cycle.Loading demo…
import { Badge, Block, Marquee } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Marquee>
{['Design', 'Build', 'Ship', 'Learn'].map((item) => (
<Badge key={item}>{item}</Badge>
))}
</Marquee>
</Block>
);
}Vertical and Reverse
Set a fixed
h for vertical scrolling and use reverse to change direction.Loading demo…
import { Badge, Block, Marquee } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Marquee orientation="vertical" h={120} reverse>
{['Alpha', 'Beta', 'Gamma'].map((item) => (
<Badge key={item}>{item}</Badge>
))}
</Marquee>
</Block>
);
}Pause on Hover
pauseOnHover pauses the row when a pointer rests on it.Loading demo…
import { Badge, Block, Marquee } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Marquee pauseOnHover>
{['Alpha', 'Beta', 'Gamma', 'Delta'].map((item) => (
<Badge key={item}>{item}</Badge>
))}
</Marquee>
</Block>
);
}Multiple Rows
Combine forward and reverse marquees for two rows.
Loading demo…
import { Badge, Block, Marquee } from '@plocks/ui';
const labels = ['Alpha', 'Beta', 'Gamma', 'Delta'];
export function Demo() {
return (
<Block fullWidth>
<Marquee>
{labels.map((item) => (
<Badge key={item}>{item}</Badge>
))}
</Marquee>
<Marquee reverse mt="sm">
{labels.map((item) => (
<Badge key={item}>{item}</Badge>
))}
</Marquee>
</Block>
);
}Fade Edges
fadeEdgeSize and fadeEdges control the edge treatment.Loading demo…
import { Badge, Block, Marquee } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Marquee fadeEdgeSize="15%">
{['Alpha', 'Beta', 'Gamma', 'Delta'].map((item) => (
<Badge key={item}>{item}</Badge>
))}
</Marquee>
</Block>
);
}Customization
duration, gap, and repeat tune movement and density.Loading demo…
import { Badge, Block, Marquee } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Marquee duration={12000} gap="xl" repeat={5}>
{['Alpha', 'Beta', 'Gamma', 'Delta'].map((item) => (
<Badge key={item}>{item}</Badge>
))}
</Marquee>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources