Animated Hero Section UI

This code creates an animated hero section for a website, designed to grab user attention and showcase key features. It addresses the need for an engaging and visually appealing introduction to a website, particularly for applications that want to highlight speed and ease of use. The section incorporates several key elements: a navigation bar at the top, a visually striking layout using subtle background lines and gradients, and animated text and buttons using the `motion` library. The hero section features a large headline, a concise description, and calls to action (buttons). The animation is implemented using `motion.span` to apply staggered transitions to individual words, creating a smooth reveal effect. The other elements, like the description and buttons, also have subtle animations for a cohesive user experience. Here's how it works: 1. **Structure:** The main component, `HeroSectionOne`, uses flexbox for layout, positioning elements absolutely to create the visual lines. A `Navbar` component is included for navigation. 2. **Animation:** The `motion` library from Framer Motion is used to animate the headline, description, buttons, and an image preview. Each element has its own animation properties, defining opacity, position, and transition timing. The animations are staggered to create a more dynamic feel. 3. **Styling:** The code employs CSS classes for styling, utilizing tailwind for rapid UI development. It includes dark mode support using the `dark` modifier classes. 4. **Components:** The code is organized into two components: `HeroSectionOne` (main section) and `Navbar` (navigation). This code could be applied to various websites and applications, especially those focusing on software, AI, or web development, where highlighting speed and ease of use is important. It can be integrated into any project that uses React and Tailwind CSS. The design is modern, clean, and easily customizable to fit different branding guidelines. Example scenarios include landing pages for SaaS applications, product demos, and marketing websites.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Hero Section UI to your project and fits it to your theme.

import { HeroSectionOne } from "@/components/ui/animated-hero-section-ui";

export default function DemoOne() {
  return <HeroSectionOne />;
}