Animated Text Background

The `Animated Text Background` component creates a visually engaging section with dynamic text and image animations, ideal for headers or landing pages.

Animated Landing page

Luffy

Install Dependencies

npm install motion react-icons

Add util file

Create a file named utils.ts in the same directory as the component and add the following code:

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

use this component in your app

<AnimatedTextBackground
image=["your-image-url-1", "your-image-url-2"]
words=["word1", "word2", "word3"]
/>

AnimatedTextBackground Props

Prop	Type	Default	Description
`images`	`string[]`	`["/4.png", "/5.png", "/6.png", "/7.png"]`	Array of image paths that cycle as backgrounds
`words`	`string[]`	`["Luffy", "Naruto", "Gojo", "Minato"]`	Array of words that animate in and out with each image