Hero Image Overlay with Animated Gradient Text
A stunning full-screen hero section designed for premium brands and creative websites.
Features
- Full-screen background image with beautiful beach scenery from Unsplash
- Multi-color overlay gradient (purple/black/blue) for brand identity
- Animated gradient text that shifts colors continuously
- Smooth fade-in animations with Framer Motion (staggered children)
- Responsive typography that scales perfectly on all devices
- Hover effects on buttons with scale transform
- Mobile-friendly flex column layout on small screens
Installation
npm install framer-motion
Dependencies
This component requires the following shadcn/ui components:
Make sure you have it installed in your project:
npx shadcn-ui@latest add button
Usage
import HeroImageOverlay from '@/components/hero-image-overlay'
export default function Page() {
return <HeroImageOverlay />
}
Customization Options
- Background image: Replace the Unsplash URL with your own image
- Overlay colors: Modify the gradient colors in the overlay div
- Text gradient: Change the gradient colors in the h1 className
- Animation speed: Adjust the
duration: 1 in the item transition
- Button text: Update the button labels as needed
- Stagger delay: Change the value
