Interactive 3D Hero Section
A modern, animated hero section featuring:
- Mouse-follow 3D tilt effect on the preview image
- Staggered text animations using Framer Motion
- Gradient backgrounds with animated blobs
- Responsive layout that adapts from mobile to desktop
- Customizable CTA buttons with hover effects
Features
- Smooth spring animations for the 3D tilt
- Accessible button components from shadcn/ui
- Gradient text effects
- Backdrop blur effects on image container
- Fully responsive design
Installation
npm install framer-motion lucide-react
Usage
import HeroSection from '@/components/hero-section'
export default function Page() {
return <HeroSection />
}
