Crossed Bands

Duas faixas animadas cruzadas deslizando em direções opostas. Ângulo, velocidade, cor e separador são configuráveis. Adapta o ângulo automaticamente no mobile.

Preview

React

TypeScript

Next.js

Tailwind CSS

Motion

React

TypeScript

Next.js

Tailwind CSS

Motion

Open Source

CLI Install

Componentes

Acessível

Performance

Open Source

CLI Install

Componentes

Acessível

Performance

Instalação

1. Rode o comando

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

npx hubkitlib add marquee-crossed-bands

Uso

import { CrossedBands } from "@/components/crossed-bands";

// Altere os itens abaixo para mudar o texto das faixas
const top = ["React", "TypeScript", "Next.js", "Tailwind CSS", "Motion"];
const bottom = ["Open Source", "CLI Install", "Componentes", "Acessível", "Performance"];

export default function Page() {
  return <CrossedBands topItems={top} bottomItems={bottom} />;
}

Props

Prop	Tipo	Padrão	Descrição
topItems	string[]	—	Itens da faixa superior (vai para a esquerda).
bottomItems	string[]	—	Itens da faixa inferior (vai para a direita).
speed	number	0.045	Velocidade em pixels por milissegundo.
rotationDesktop	number	3.2	Ângulo de inclinação em graus no desktop.
rotationMobile	number	9.5	Ângulo de inclinação em graus no mobile.
bandColor	string	"#111111"	Cor de fundo das faixas.
textColor	string	"#ffffff"	Cor do texto dos itens.
separator	string	"/ /"	Separador exibido entre os itens.
height	number	200 / 160	Altura do container em px. Padrão: 200 no desktop, 160 no mobile.
className	string	—	Classes extras para o container.

Personalização

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

Cor das faixas

Altere bandColor para qualquer cor CSS. Use gradientes editando diretamente o background no Band.

bandColor="#1a1a1a"

Ângulo de inclinação

Aumente rotationDesktop para um cruzamento mais dramático ou diminua para mais sutil.

rotationDesktop={6} rotationMobile={14}

Separador customizado

Substitua o separador padrão por qualquer string.

separator="·"

Velocidade diferente por faixa

Para velocidades distintas entre as duas faixas, edite o speed dentro de cada <Band /> diretamente no componente.

<Band ... speed={0.03} />
<Band ... speed={0.06} />

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.