Marquee Strip

Faixa com itens deslizando em loop infinito. Suporta direção, velocidade e ícones customizáveis. Pausa automaticamente quando fora da viewport.

Preview

[React]

[TypeScript]

[Tailwind CSS]

[Next.js]

[Motion]

[Radix UI]

[React]

[TypeScript]

[Tailwind CSS]

[Next.js]

[Motion]

[Radix UI]

Instalação

1. Rode o comando

O CLI instala as dependências e cria o arquivo no seu projeto automaticamente.

npx hubkitlib add marquee-strip

Uso

import { MarqueeStrip } from "@/components/marquee-strip";

const items = [
  { label: "React" },
  { label: "TypeScript" },
  { label: "Next.js" },
  { label: "Tailwind CSS" },
];

export default function Page() {
  return <MarqueeStrip items={items} />;
}

Props

Prop	Tipo	Padrão	Descrição
items	MarqueeItem[]	—	Lista de itens. Cada item tem label (string) e icon opcional (ReactNode).
speed	number	0.04	Velocidade em pixels por milissegundo.
direction	"left" \| "right"	"left"	Direção do movimento da faixa.
gap	number	32	Espaçamento em pixels entre os itens.
className	string	—	Classes extras para o container da faixa.

Personalização

Após copiar o componente, estes são os pontos exatos para personalizar cada aspecto visual:

Velocidade

Aumente speed para mais rápido, diminua para mais lento.

<MarqueeStrip items={items} speed={0.08} />

Direção inversa

Use direction="right" para inverter o sentido da animação.

<MarqueeStrip items={items} direction="right" />

Com ícones

Passe qualquer ReactNode no campo icon de cada item.

const items = [
  { label: "React", icon: <ReactIcon size={16} /> },
];

Estilo dos itens

Edite o fontSize, letterSpacing e textTransform no bloco de estilo de cada item dentro de renderItems.

fontSize: "0.85rem", letterSpacing: "0.04em", textTransform: "uppercase"

Separadores

Os colchetes [ ] têm opacity 0.3. Aumente para mais visíveis ou remova os spans para eliminar.

<span style={{ opacity: 0.3, fontSize: "0.9rem" }}>[</span>

Documentação

Documentação hubkit

Pré-requisitos, configuração do Tailwind, dependências comuns e tudo que você precisa para usar os componentes do hubkit no seu projeto.