Noise Trail
OfficialA mesmerizing container with animated gradient trails and noise texture overlay. Perfect for highlighting CTAs, cards, or featured content.
Freecontainergradientnoiseanimationtrailcard
0 downloadsOonkooUI Team
Installation
Run the following command:
npx oonkoo add noise-trailProps
NoiseTrail Props
| Prop | Type | Default |
|---|---|---|
| children | React.ReactNode | - |
| className | string | - |
| containerClassName | string | - |
| gradientColors | string[] | [ |
| noiseIntensity | number | 0.2 |
| speed | number | 0.1 |
| backdropBlur | boolean | false |
| animating | boolean | true |
Usage
Copy and paste the following code to use this component:
import { NoiseTrail } from "@/components/oonkoo/noise-trail";
<NoiseTrail containerClassName="p-1">
<button className="px-6 py-3 bg-[#1F1C1C] rounded-xl text-white">Get Started</button>
</NoiseTrail>