Animation Types
flow
Animation Pattern
mesh
Animation Pattern
waves
Animation Pattern
aurora
Animation Pattern
spiral
Animation Pattern
pulse
Animation Pattern
Grain Types
digital
Grain Texture
plasma
Grain Texture
scratches
Grain Texture
paper
Grain Texture
noise
Grain Texture
dust
Grain Texture
Installation
Usage
import { AnimatedGrainyBg } from "@/components/ui/animated-grainy-bg";<div className="relative h-[500px] w-full overflow-hidden bg-transparent">
<div className="absolute inset-0">
<AnimatedGrainyBg
position="absolute"
colors={["#3b82f6", "#2563eb", "#1d4ed8", "#1e40af"]}
/>
</div>
<div className="relative z-10 flex h-full items-center justify-center text-white">
<div className="p-4 text-center">Animated Background</div>
</div>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | undefined | Content to render on top of the gradient background. |
className | string | "" | Additional CSS classes to apply to the container. |
style | React.CSSProperties | undefined | Inline styles to apply to the container. |
colors | string[] | Auto-selected based on darkMode | Array of colors to use in the gradient pattern. |
speed | number | 1 | Speed factor for the gradient animation (higher = faster). |
grainType | string | "digital" | Type of grain texture effect: digital (sharp pixelated), plasma (organic flowing), scratches (linear streaks), paper (smooth textured), noise (fine random), dust (scattered particles). |
grainIntensity | number | 60 | Intensity of the grain effect (0-100). |
grainSize | number | 100 | Size of the grain particles. |
animationType | string | "mesh" | Animation pattern effect: flow (smooth directional), mesh (interconnected nodes), waves (rhythmic undulation), aurora (curtain-like movement), spiral (circular rotation), pulse (concentric expansion). |
size | "sm" | "md" | "lg" | "full" | number | "full" | Size of the background container. Numbers represent pixels. |
position | string | "relative" | CSS position property for the background container. |
zIndex | number | 0 | z-index of the background container. |
animate | boolean | true | Enable or disable background animation. |
darkMode | boolean | false | Enable dark mode styling and default colors. |
as | string | "div" | HTML element to render as the container. |
grainBlendMode | string | "soft-light" | CSS blend mode effect for grain layer: multiply (darkens), overlay (contrast), soft-light (gentle), hard-light (intense), screen (brightens), color-burn (dramatic), normal (standard). |