Carregando…

Background Gradient Animation

Backgrounds

5 animated radial gradient blobs blending together, with an optional pointer-following blob — adapted from Aceternity UI.

Instalação via CLI

$ npx kikitocn add background-gradient-animation

Interno:

@/lib/utils

Exemplo de uso

Background Gradient AnimationExample.tsx

import { BackgroundGradientAnimation } from "@/components/ui/cn/background-gradient-animation/BackgroundGradientAnimation";

export function BackgroundGradientAnimationExample() {
  return (
    <BackgroundGradientAnimation>
      Background Gradient Animation
    </BackgroundGradientAnimation>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children`	`ReactNode`	`undefined`	Conteúdo sobre os blobs
`gradientBackgroundStart`	`string`	`'rgb(108, 0, 162)'`	Cor inicial do fundo
`gradientBackgroundEnd`	`string`	`'rgb(0, 17, 82)'`	Cor final do fundo
`firstColor`	`string`	`'18, 113, 255'`	Cor do 1º blob (rgb sem 'rgb()')
`secondColor`	`string`	`'221, 74, 255'`	Cor do 2º blob
`thirdColor`	`string`	`'100, 220, 255'`	Cor do 3º blob
`fourthColor`	`string`	`'200, 50, 50'`	Cor do 4º blob
`fifthColor`	`string`	`'180, 180, 50'`	Cor do 5º blob
`pointerColor`	`string`	`'140, 100, 255'`	Cor do blob que segue o cursor
`size`	`string`	`'80%'`	Tamanho de cada blob
`blendingValue`	`string`	`'hard-light'`	mix-blend-mode entre os blobs
`interactive`	`boolean`	`true`	Blob extra que segue o mouse
`className`	`string`	—	Classes do conteúdo
`containerClassName`	`string`	—	Classes do container externo

Voltar para Backgrounds

Carregando…