Silk Hero
NewPro
A full landing page hero: live silk behind a headline that blurs into focus, a subtitle and two calls to action.
Customize
#ff784f
0.75
When to use it
- The first screen of a SaaS, app or agency landing page
- Launch pages that need one strong visual and a clear signup link
- Portfolio home pages where the background sets the mood
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Lines of code
- 76
Installation
Silk Hero is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy silk-hero.tsx into components/ui and run npm install motion.
Usage
import { SilkHero } from "@/components/ui/silk-hero";
export default function Home() {
return (
<SilkHero
eyebrow="New: team workspaces"
title="Ship with soft power"
subtitle="Plan, build and launch in one place, without the busywork."
primary={{ label: "Start free", href: "/signup" }}
secondary={{ label: "See pricing", href: "/pricing" }}
/>
);
}Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| title | string | — | Headline. Words blur into focus one after another. |
| eyebrow | string | — | Short line in a pill above the title. |
| subtitle | string | — | Supporting paragraph under the title. |
| primary | { label: string; href: string } | — | Main button, filled with the color. |
| secondary | { label: string; href: string } | — | Outlined second button. |
| color | string | "#ff784f" | Silk and primary button color, as a hex value. |
| quality | number | 0.75 | Silk render resolution from 0.25 to 1. Lower it on heavy pages. |
| as | "h1" | "h2" | "h1" | Heading level. Use h2 when the page already has an h1. |
| className | string | — | Extra classes for the section. |
Dependencies: motion