Marquee

A scrolling display of content that fades in and out on both ends.

Preview

Code

Examples

The following blocks are built with this component:

This component also accepts all the props from Mantine's Flex component.

Name		Type	Default value	Description
duration		number	`20`	Controls the speed of the animation.
gap		StyleProp<number \| MantineSize \| (string & {})>	`md`	The spacing between each item.
items	Required	ReactNode[]		The items to display in the marquee.
reverse		boolean	`false`	Whether to reverse the direction of the marquee.
showGradient		boolean	`true`	Whether to show the gradient on both ends.