Six animations. Six grains. Infinite combos.
Animated mesh gradients with film-grain textures. Mix and match animation styles and grain types for unique backgrounds.
Animated mesh backgrounds with film-grain textures.
Soft fibrous texture.
Breathing concentric rings.
Rolling horizontal bands.
Counter-rotating spirals.
Drifting radial blobs.
Connected mesh nodes.
Installation
Usage
import { GrainyBackground } from "@/components/ui/grainy-background";<div className="relative h-[500px] w-full overflow-hidden bg-transparent">
<div className="absolute inset-0">
<GrainyBackground
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 | undefined | 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). |
Examples
Hero Section
Pricing Cards
Pricing
Build like a Studio.
Ship with confidence.
Pick your stack. Start building products you're proud to launch.
Web Studio
Get access to React library components and features
Perpetual license
Pro React components
Premium templates
Pro AI (Skills and MCPs)
500 AI credits included
Premium design systems
Pro design systems
Private Discord channel
Prioritized issues
Priority support
Optional updates renewal at $99/yr
Get another year of updates, or keep using your current version. No pressure.
Mobile Studio
Get access to React Native library components and features
Perpetual license
Pro React Native components
Premium templates
Pro AI (Skills and MCPs)
500 AI credits included
Premium design systems
Pro design systems
Private Discord channel
Prioritized issues
Priority support
Optional updates renewal at $99/yr
Get another year of updates, or keep using your current version. No pressure.
Save $199 with the bundle
Studio Pro
The full system. React and React Native, together
Perpetual license
All Pro components (React + React Native)
Premium templates
Pro AI (Skills and MCPs)
1000 AI credits included
Premium design systems
Pro design systems
Private Discord channels
Prioritized issues
Priority support
Optional updates renewal at $129/yr
Get another year of updates, or keep using your current version. No pressure.
Note:If you're a NyxUI v2 Pro customer, you're eligible for an upgrade discount, use the same email address or contact us support@nyxui.com
Looking for NyxUI Pro v2? Go to v2 →