The `Hero` component creates a visually engaging section with dynamic text and image animations, ideal for headers or landing pages.

Traditional Landing Page

Traken

Components
About
Docs
Contact

Traken UI pioneers immersive design systems,

combining stunning visuals with

intuitive interfaces

for exceptional user experiences.

Install Dependencies

npm install motion react-icons

Add util file

Create a file named utils.ts in the same directory as the component and add the following code:

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

use this component in your app

<Hero
  title="Traken"
  // Custom props can be passed here
  backgroundImage="https://i.pinimg.com/originals/44/4b/8f/444b8f406347a470a7de5478206dd158.gif"
  paragraphs={[
    "Gumshoe Studios pioneers immersive storytelling in gaming,",
    "animation, merging stunning visuals",
    "with engaging narratives",
    "for groundbreaking experiences.",
  ]}
  navLinks={[
    { name: "Project", url: "#projects" },
    { name: "About", url: "#about" },
    { name: "News", url: "#news" },
    { name: "Contact", url: "#contact" },
    { name: "Career", url: "#career" },
  ]}
/>

Props

Prop	Type	Default	Description
`title`	`string`	`"gumshoe"`	The main title displayed in the header
`backgroundImage`	`string`	`"https://i.pinimg.com/originals/44/4b/8f/444b8f406347a470a7de5478206dd158.gif"`	URL for the background image
`paragraphs`	`string[]`	See default below	Array of text lines for the description
`navLinks`	`NavLinkType[]`	See default below	Array of navigation links
`titleSize`	`{ initial: string; scrolled: string }`	`{ initial: "3rem", scrolled: "2rem" }`	Font sizes for title in normal and scrolled states
`backgroundColor`	`string`	`"black"`	Background color that shows behind or with the image
`textColor`	`string`	`"white"`	Color for all text elements

Traditional Component