Shadcn UI Hero Block
The Hero221 component provides a visually engaging section typically used as a prominent start to a page. It is designed with dynamic elements that capture the user's attention through motion and captivating text, utilizing the shadcn block approach. This component is an excellent choice for landing a message with impact, blending animation with clear call-to-action elements effectively.
Upon rendering, Hero221 utilizes a combination of Framer Motion for smooth animations and custom typography styles through a VideoText component that displays visually appealing text from a shadcn block. The text appears over a rich video background, delivering a bold and modern aesthetic. Accompanied by a concise call-to-action button, this component sets the stage for user interaction and navigation, using a dynamic icon from the lucide-react library to enhance the interactive experience.
Dependencies
| Package | Type |
|---|---|
| framer-motion | NPM |
| lucide-react | NPM |
| react | NPM |
video-text @magicui | Registry |
button @shadcn | Registry |