Carregando…

Warp Background

Backgrounds

3D grid backdrop with animated rainbow light beams shooting from the edges (hyperspace effect).

Instalação via CLI

$ npx kikitocn add warp-background

Interno:

@/lib/utilsmotion

Exemplo de uso

Warp BackgroundExample.tsx

import { WarpBackground } from "@/components/ui/cn/warp-background/WarpBackground";

export function WarpBackgroundExample() {
  return (
    <WarpBackground>
      Warp Background
    </WarpBackground>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children*`	`React.ReactNode`	—	Conteúdo sobreposto ao fundo
`perspective`	`number`	`100`	Perspectiva 3D em px
`beamsPerSide`	`number`	`3`	Quantidade de feixes por lado
`beamSize`	`number`	`5`	Tamanho de cada célula da grade (%)
`beamDelayMin`	`number`	`0`	Atraso mínimo antes de repetir, em s
`beamDelayMax`	`number`	`3`	Atraso máximo antes de repetir, em s
`beamDuration`	`number`	`3`	Duração da subida do feixe, em s
`gridColor`	`string`	`'var(--ks-rule)'`	Cor das linhas da grade
`className`	`string`	—	Classes CSS extras

Voltar para Backgrounds

Carregando…