Beam Card

Card com borda animada em beam giratório. Um gradiente cônico gira continuamente criando o efeito de luz percorrendo a borda. Cor, velocidade e raio são configuráveis.

Preview

Plano Pro

R$ 49 /mês

Tudo que você precisa para lançar produtos incríveis.

Instalação

1. Rode o comando

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

npx hubkitlib add cards-beam-card

Uso

import { BeamCard } from "@/components/beam-card";

export default function Page() {
  return (
    <BeamCard>
      {/* Coloque aqui o conteúdo do seu card */}
      <p>Título</p>
      <p>Descrição do card.</p>
    </BeamCard>
  );
}

Props

Prop	Tipo	Padrão	Descrição
children	React.ReactNode	—	Conteúdo interno do card.
duration	number	5	Duração em segundos de cada volta completa do beam.
beamGradient	string	conic branco	Gradiente cônico completo usado no beam. Substitua para mudar cor e intensidade.
background	string	"#0f0f0f"	Cor de fundo do interior do card.
borderRadius	number	16	Raio das bordas em px.
padding	number \| string	"20px"	Padding interno do card.
className	string	—	Classes extras para o wrapper externo.

Personalização

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

Beam colorido

Troque o gradiente cônico para criar um beam em qualquer cor.

beamGradient="conic-gradient(from 0deg, transparent 0%, transparent 82%, rgba(124,58,237,0.04) 86%, rgba(124,58,237,0.65) 89%, rgba(124,58,237,1) 91%, rgba(124,58,237,0.65) 93%, rgba(124,58,237,0.04) 96%, transparent 100%)"

Rotação mais lenta

Aumente duration para um efeito mais sutil e lento.

duration={12}

Bordas mais arredondadas

Ajuste borderRadius para qualquer valor em px.

borderRadius={24}

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.