Animated Background

display

Animated gradient or particle background for hero sections and landing pages.

Preview

No preview available

Check the code examples below.

Installation

npm install @launchapp/design-system
Import
import { AnimatedBackground } from "@launchapp/design-system";

Examples

Gradient background

<div className="relative h-64 rounded-xl overflow-hidden">  <AnimatedBackground variant="gradient" />  <div className="relative z-10 flex h-full items-center justify-center">    <h1 className="text-3xl font-bold text-white">Hero Title</h1>  </div></div>

Props

PropTypeDefaultDescription
variant
"gradient" | "particles" | "noise""gradient"Visual style of the animation.
className
string—Additional CSS classes.
← PreviousVisuallyHidden
Next →Animated Border