Hero
Hero Profile
A person's opening screen: greeting, name, role, buttons and social links, over changing photos with a specialities card or on the page with a portrait.
Layout and motion from the Tustel template — see it in contextTry it in the page builderBlocks come with Pro
Preview every block now, in any theme and at any width. The source, the install command and the AI prompt unlock when Pro opens, once the catalog reaches 20 templates.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| as | "h1" | "h2" | "h1" | The heading level of the name. |
| greeting | string | "Hello, I'm" | The line above the name. |
| name | string | — | The heading, at the display size, rising letter by letter on load. |
| role | string | — | Under the name, up to 250px. |
| subtitle | string | — | With photos: a line about the work at the top of the screen; empty for none. |
| intro | string | — | Without photos: a paragraph under the role, up to 620px; empty for none. |
| images | { src, alt }[] | 2 photos | Photos that change every 5s behind a black 60% cover. [] makes the about page, on the page's own background. |
| portrait | string | — | A small round portrait (decorative): beside the name without photos (52px, 82px from 768px), in the specialities card with them. |
| specialties | { label, lines[] } | — | With photos: a glass card at the right whose lines roll up at 5px/s beside the portrait. |
| actions | { label, href }[] | 2 buttons | One or two buttons: filled, then outlined (white over the photos). |
| socials | { label, href }[] | 4 links | Links at the foot under a line: the first half at the left, the rest at the right. Full addresses open in a new tab. |
| className | string | — | Classes for the <section>. |
- As tall as the window (min-h-svh). With photos: the subtitle at the top, the profile and the card side by side from 768px at the bottom, the social links below; padding 120 / 120 / 150px on top. Without: the profile at the top, the links at the foot; padding 200 / 250 / 250px on top.
- On load the greeting and role rise word by word and the name letter by letter (text-appear, 0.05s apart); the buttons, card and links rise 50px after 0.2–0.3s (scroll-reveal). The photos slide every 5s (slideshow) and stay on the first with reduced motion.
