Game Launch Hero
NewPro
A store-page style hero for a game launch: rising embers, the title, a release badge, a pixel wishlist button and framed key art.
Customize
#ff784f
When to use it
- Landing pages for a game before and after release
- Wishlist and demo pages that point players to a store
- Event or jam pages that announce a playable build
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Lines of code
- 94
Installation
Game Launch Hero is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy game-launch-hero.tsx into components/ui and run npm install motion.
Usage
import { GameLaunchHero } from "@/components/ui/game-launch-hero";
<GameLaunchHero
title="Kilnlight"
tagline="A cozy forge sim about rebuilding a mountain town, one blade at a time."
release="Coming 2027"
cta={{ label: "Wishlist on Steam", href: "https://store.steampowered.com/app/your-app-id" }}
secondary={{ label: "Watch the trailer", href: "#trailer" }}
platforms={["Windows", "macOS", "Steam Deck"]}
media={<img src="/key-art.jpg" alt="Kilnlight key art" className="size-full object-cover" />}
/>Props
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| title | string | — | The game's name. |
| tagline | string | — | One or two lines on what the game is. |
| release | string | — | Badge text, such as "Coming 2027" or "Out now". |
| cta | { label: string; href: string } | — | Main pixel button, usually a store wishlist link. |
| secondary | { label: string; href: string } | — | Text link next to the button, such as a trailer. |
| platforms | string[] | [] | Platforms listed under the buttons. |
| media | ReactNode | — | Key art, a screenshot or a trailer embed for the framed panel. |
| color | string | "#ff784f" | Ember and button color, as a hex value. |
| as | "h1" | "h2" | "h1" | Heading level. Use h2 when the page already has an h1. |
| className | string | — | Extra classes for the section. |
Dependencies: motion