Carregando…

Wavy Background

Backgrounds

Five simplex-noise wave lines drawn on a blurred canvas, container-relative — adapted from Aceternity UI.

Instalação via CLI

$ npx kikitocn add wavy-background

Interno:

@/lib/utilssimplex-noise

Exemplo de uso

Wavy BackgroundExample.tsx

import { WavyBackground } from "@/components/ui/cn/wavy-background/WavyBackground";

export function WavyBackgroundExample() {
  return (
    <WavyBackground speed="slow">
      Wavy Background
    </WavyBackground>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode`	—	Conteúdo sobre as ondas (z-10)
`colors`	`string[]`	—	Cores das 5 ondas (literais — canvas não aceita CSS var)
`waveWidth`	`number`	`50`	Largura do traço de cada onda
`blur`	`number`	`10`	Blur (px) do canvas
`speed`	`'slow' \| 'fast'`	`'fast'`	Velocidade da animação
`waveOpacity`	`number`	`0.5`	Opacidade global das ondas
`backgroundFill`	`string`	`'transparent'`	Preenchimento do fundo por frame
`containerClassName`	`string`	—	Classe no container
`className`	`string`	—	Classe no conteúdo

Voltar para Backgrounds

Carregando…