Carregando…

Moving Border

Inputs

Button with a single light dot travelling around the border via getPointAtLength — adapted from Aceternity UI.

UnificadosShiny Rotating Border Button

Shiny Rotating Border Button

Unificado

Instalação via CLI

$ npx kikitocn add moving-border

Interno:

@/lib/utilsmotion

Exemplo de uso

Moving BorderExample.tsx

import { MovingBorder } from "@/components/ui/cn/moving-border/MovingBorder";

export function MovingBorderExample() {
  return (
    <MovingBorder>
      Moving Border
    </MovingBorder>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children*`	`React.ReactNode`	—	Conteúdo do botão
`borderRadius`	`string`	`'1.75rem'`	Raio da borda (qualquer unidade CSS)
`as`	`React.ElementType`	`'button'`	Elemento externo
`duration`	`number`	`3000`	ms por volta completa do ponto de luz
`containerClassName`	`string`	—	Classe no elemento externo
`borderClassName`	`string`	—	Classe no ponto de luz
`className`	`string`	—	Classe no corpo do botão

Voltar para Inputs

Carregando…