The Hero222 component is a visually engaging shadcn ui block, designed to capture user interaction dynamically through mouse movement. It serves as an introductory section for a webpage, centering on an animated headline with accompanying interactive cursor effects and a call-to-action button. The component leverages motion animations to provide a seamless visual experience, emphasizing the content's impact and the enticing "Get Started" button.
The component's detailed functionality involves tracking the user's mouse position, showcasing real-time x and y coordinates, which dynamically influence the visual style of the text elements. This effect utilizes a variable font, creating a unique user experience that responds to mouse motion. Positioned against a full-screen background image, the component uses a blend of animation and static elements to highlight its content, making it an outstanding choice for a visually-centric introductory block in any shadcn-based project. The Hero222 component features a flexible layout that adjusts typography and visual effects based on user interaction, utilizing advanced text transformations for a sophisticated look.
| Package | Type |
|---|---|
| framer-motion | NPM |
| lucide-react | NPM |
| react | NPM |
variable-font-and-cursor.json @fancy | Registry |