Stars Background

Background animado com estrelas em parallax. Reage ao movimento do mouse e suporta personalização de cor, velocidade e densidade.

Preview

Instalação

1. Rode o comando

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

npx hubkitlib add background-stars

Uso

import { StarsBackground } from "@/components/stars-background";

export default function Page() {
  return (
    <StarsBackground className="min-h-screen flex items-center justify-center">
      <h1 className="text-white text-4xl">Seu conteúdo aqui</h1>
    </StarsBackground>
  );
}

Props

Prop	Tipo	Padrão	Descrição
starColor	string	"rgba(255,255,255,0.5)"	Cor das estrelas em qualquer formato CSS válido.
speed	number	50	Duração em segundos da animação de scroll das estrelas menores. Camadas maiores são múltiplos desse valor.
factor	number	0.05	Intensidade do efeito parallax ao mover o mouse. Valores maiores aumentam o deslocamento.
springTransition	SpringOptions	{ stiffness: 50, damping: 20 }	Configuração do spring que suaviza o movimento parallax.
children	ReactNode	—	Conteúdo renderizado sobre o background.
className	string	—	Classes Tailwind extras para controlar tamanho e layout do container.

Personalização

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

Cor das estrelas

Altere starColor para qualquer cor. Use rgba para controlar a opacidade.

starColor="rgba(255,255,255,0.3)"

Velocidade da animação

Reduza speed para estrelas mais rápidas, aumente para mais lentas. As camadas maiores são automaticamente mais lentas (speed * 2, speed * 3).

speed={30}

Intensidade do parallax

O factor controla o quanto as estrelas se deslocam ao mover o mouse. Use 0 para desativar o efeito.

factor={0.08}

Densidade das estrelas

Edite os valores de count em cada StarLayer para mais ou menos estrelas por tamanho.

<StarLayer count={1500} size={1} ... />
<StarLayer count={600} size={2} ... />
<StarLayer count={300} size={3} ... />

Gradiente de fundo

O gradiente radial está no className do container. Troque as cores para adaptar ao seu tema.

"bg-[radial-gradient(ellipse_at_bottom,_#1a1a1a_0%,_#000_70%)]"

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.