Carregando…

Noise Background

Backgrounds

Card with 3 drifting radial gradients under a static noise texture — adapted from Aceternity UI.

UnificadosAnimated Noise

Animated Noise

Unificado

Instalação via CLI

$ npx kikitocn add noise-background

Interno:

@/lib/utilsmotion

Exemplo de uso

Noise BackgroundExample.tsx

import { NoiseBackground } from "@/components/ui/cn/noise-background/NoiseBackground";

export function NoiseBackgroundExample() {
  return (
    <NoiseBackground>
      Noise Background
    </NoiseBackground>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children`	`ReactNode`	`undefined`	Conteúdo sobre o efeito
`gradientColors`	`string[]`	`3 cores rosa/azul/laranja`	Cores dos 3 gradientes flutuantes
`noiseIntensity`	`number`	`0.2`	Opacidade da textura de ruído
`speed`	`number`	`0.1`	Velocidade do drift dos gradientes
`backdropBlur`	`boolean`	`false`	Aplica blur extra por cima
`animating`	`boolean`	`true`	Liga/desliga a animação de drift
`className`	`string`	—	Classes do conteúdo
`containerClassName`	`string`	—	Classes do container externo

Voltar para Backgrounds

Carregando…