Marquee

Horizontal scrolling strip with duplicated children for a seamless loop; respects prefers-reduced-motion.

Faixa horizontal com animação contínua; os filhos são duplicados para o loop. O componente está em @zexon/ui/components/marquee. Com prefers-reduced-motion, a animação desliga-se.

Importação

import { Marquee } from "@zexon/ui/components/marquee";

Uso

Exemplo

Zexon

Segurança

Design system

Sem filhos, o componente mostra placeholders (bg-muted) para pré-visualização. Ajusta direction, pauseOnHover, fade, grayscale e durationSeconds.

Props

Prop	Tipo	Predefinição	Notas
`direction`	`"left" \| "right"`	`"left"`	Sentido do scroll
`pauseOnHover`	`boolean`	`true`	Pausa a animação ao passar o rato no contentor
`fade`	`boolean`	`true`	Máscara em gradiente nas extremidades
`grayscale`	`boolean`	`false`	Efeito cinza + contraste (útil para logos)
`durationSeconds`	`number`	`10`	Duração de um ciclo completo
`className`	`string`	—	Classes no contentor interno
`children`	`ReactNode`	—	Conteúdo repetido em duas faixas para o loop

Label

Menubar