COMP-BACKGROUND-006 / backgrounds

Noise Background

Fundo dinâmico oficial com gradientes animados, textura de ruído e movimento suave.

PIVUS / ATMOSPHERE SYSTEMMake texture
carry the mood.Animated color, grain and softness for a more tactile first impression.Explore the system ↗

Compatibilidade

Astro: react-island
React: yes
Next: yes

Fonte

Aceternity UI — Noise Background
Documentação oficial ↗

Styles compatíveis

tech-modern, minimal-warm, editorial, corporate-clean

Patterns compatíveis

heroes, cta, services

Metadados

Implementação: react-island
Motion: ambient expressive — spring, random velocity and animated gradient layers
Performance: medium — motion animation frame, layered gradients and remote noise image
Tags: noise, background, gradient, animated, motion, texture, hero, cta
Dependências: motion, remote asset: https://assets.aceternity.com/noise.webp

Quando usar

Hero, CTA ou card que precisa de textura, cor e movimento atmosférico sem conteúdo perder foco.

Quando evitar

Contextos que exigem zero JavaScript, ausência de asset remoto ou estabilidade visual completamente estática.

Notas

Código oficial preservado em components/ui/noise-background.tsx. Preview adiciona somente composição contextual via children e classes externas; props, spring, timing, easing, randomização, blur e animação permanecem originais. Astro: react-island com client:load ou client:visible; não Astro Native.