Mordecai
Getting Started
Forms
Layout
Cards
Navigation
Data Display
Feedback
Overlays
Utilities
Blocks
CMS Integration
GitHub

Hero

A landing page hero section with word-by-word animated title reveal, fade-in content, optional decorative borders, and featured media.

Loading...

Basic Usage

import { Hero } from "@corew500/ui/blocks/hero"

<Hero
  title="Launch your website in hours"
  subtitle="AI-powered tools to get your site up fast."
  action={{ label: "Get Started", href: "/signup" }}
/>

With Secondary Action

<Hero
  title="Build something amazing today"
  subtitle="Everything you need to create your next project."
  action={{ label: "Start Free", href: "/signup" }}
  secondaryAction={{ label: "View Demo", href: "/demo" }}
/>

With Media

<Hero
  title="Welcome to Our Platform"
  subtitle="See what you can build."
  action={{ label: "Get Started", href: "/signup" }}
  media={{
    src: "/hero-preview.webp",
    alt: "Platform dashboard preview"
  }}
/>

Decorative Borders

Add gradient-accented decorative borders around the hero section.

<Hero
  title="Design with Elegance"
  subtitle="Premium components for modern interfaces."
  action={{ label: "Explore", href: "/components" }}
  decorative
/>

Title Text Effects

Apply shimmer, highlight, or gradient effects to specific words in the title. Words are identified by their 0-indexed position after splitting on spaces.

// Shimmer effect on word index 4 ("hours")
<Hero
  title="Launch your website in hours"
  titleEffect={{ words: [4], effect: "shimmer", color: "primary" }}
  subtitle="AI-powered tools to get your site up fast."
  action={{ label: "Get Started", href: "/signup" }}
/>

// Highlight effect on multiple words
<Hero
  title="Build amazing products faster"
  titleEffect={{ words: [1, 2], effect: "highlight", color: "accent" }}
/>

// Gradient effect (uses theme tokens, no color prop needed)
<Hero
  title="Create beautiful experiences"
  titleEffect={{ words: [1], effect: "gradient" }}
/>

Effect Types

| Effect | Description | |--------|-------------| | shimmer | Animated shimmer/shine effect | | highlight | Subtle background highlight | | gradient | Animated gradient text color |

Effect Colors

Available colors: primary, secondary, accent, muted, destructive

Height Variants

// Auto height (default) - fits content with min 400px
<Hero title="Auto Height" height="auto" />

// Half screen - 50vh with min 400px
<Hero title="Half Screen" height="half" />

// Full screen - 100vh with min 600px
<Hero title="Full Screen" height="screen" />

Alignment

// Center aligned (default)
<Hero title="Centered Content" align="center" />

// Left aligned
<Hero title="Left Aligned Content" align="left" />

Content Width

Control the maximum width of the content area.

<Hero title="Narrow Content" contentWidth="md" />
<Hero title="Wide Content" contentWidth="4xl" />

Available widths: md, lg, xl, 2xl, 3xl, 4xl

Disable Animations

Animations can be disabled while still allowing reduced-motion to take effect automatically.

<Hero
  title="Static Hero"
  subtitle="No entrance animations"
  animated={false}
/>

Custom CTA Rendering

Use renderCta for custom button implementations, such as Next.js Link integration.

import Link from "next/link"
import { Button } from "@corew500/ui/button"

<Hero
  title="Welcome"
  action={{ label: "Shop Now", href: "/shop" }}
  renderCta={(action, isPrimary) => (
    <Button
      variant={isPrimary ? "default" : "outline"}
      size="lg"
      glow={isPrimary}
      render={<Link href={action.href} />}
    >
      {action.label}
    </Button>
  )}
/>

With i18n

The Hero component expects pre-translated content. Resolve translations before rendering.

import { useTranslations } from "next-intl"

function LocalizedHero() {
  const t = useTranslations("landing")

  return (
    <Hero
      title={t("hero.title")}
      subtitle={t("hero.subtitle")}
      action={{
        label: t("hero.cta"),
        href: "/signup"
      }}
    />
  )
}

CMS Integration

The @corew500/cms-payload package provides a ready-made schema for Payload CMS.

import { HeroBlock, resolveHeroProps } from "@corew500/cms-payload"
import { Hero } from "@corew500/ui/blocks/hero"

// In your Payload config
const config = {
  collections: [
    {
      slug: "pages",
      fields: [
        {
          name: "heroBlock",
          type: "group",
          fields: HeroBlock.fields,
        },
      ],
    },
  ],
}

// In your page component
function Page({ data }) {
  const heroProps = resolveHeroProps(data.heroBlock)

  if (!heroProps) return null

  return <Hero {...heroProps} />
}

CMS Title Effects

The CMS schema allows editors to specify word effects with a comma-separated list of word positions:

  • Word Positions: 0, 3, 5 - Applies effect to 1st, 4th, and 6th words
  • Effect Type: shimmer, highlight, or gradient
  • Color: primary, secondary, accent, muted, destructive (for shimmer/highlight)

Props

PropTypeDefaultDescription
title*string—Hero title text (required)
subtitlestring—Subtitle or description text
actionHeroAction—Primary call-to-action button
secondaryActionHeroAction—Secondary call-to-action button
mediaHeroMedia—Featured media (image) below the content
titleEffectHeroTitleEffect—Text effect to apply to specific title words. Words are identified by 0-indexed position after splitting on spaces.
contentWidthenum4xlMaximum width of the content area
decorativeenumfalseShow decorative border accents
animatedenumtrueEnable entrance animations (default true)
renderCta(action: HeroAction, isPrimary: boolean) => ReactNode—Custom render function for CTA buttons
heightenumauto—
alignenumcenter—

HeroAction Type

interface HeroAction {
  label: string
  href: string
  external?: boolean // Opens in new tab with rel="noopener noreferrer"
}

HeroMedia Type

interface HeroMedia {
  src: string
  alt: string
  aspectRatio?: number // Default: 16/9 (1.78)
}

HeroTitleEffect Type

interface HeroTitleEffect {
  words: number[]                              // 0-indexed word positions
  effect: "shimmer" | "highlight" | "gradient"
  color?: "primary" | "secondary" | "accent" | "muted" | "destructive"
}

Accessibility

  • Renders as <section> element for proper document structure
  • Title uses <h1> heading for SEO and screen readers
  • Animations automatically respect prefers-reduced-motion system setting
  • Action buttons have accessible names from their labels
  • Media images require descriptive alt text
  • Decorative borders are purely visual and don't interfere with content

Design Tokens

| Token | Description | |-------|-------------| | foreground | Title text color | | muted-foreground | Subtitle text color | | primary | Decorative border gradient accent | | border | Border colors for media container | | muted | Media container background |

Related