Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
Loading
Composing
Ready
import { ModelRevealHero } from "@/registry/tween/model-reveal-hero"
export function ModelRevealHeroDemo() {
return <ModelRevealHero />
}
import { ModelRevealHero } from "@/components/ui/model-reveal-hero"<ModelRevealHero
title="Elara Vandenberg"
images={[
"/img_1.jpg",
"/img_2.jpg",
"/img_3.jpg",
"/img_4.jpg",
"/img_5.jpg",
]}
overlayStages={["Structure", "Designed Identity", "Welcome"]}
/>The intro plays as a sequenced loader before the hero is revealed. The counter tweens 0 → 100 over counterDuration seconds with power2.out. The overlay caption cycles through overlayStages with a custom hop ease (0.85, 0, 0.15, 1). The reveal timeline then (1) finishes the counter, (2) hops the final caption out, (3) collapses the overlay, (4) scales the image strip down 2×, (5) fans the side images out from center, and (6) splits the title in with SplitText. The center image — index floor(images.length / 2) — is the one that stays in place, so pass an odd-length array.
| Prop | Type | Default | Description |
|---|---|---|---|
images | string[] | 5 default fashion shots | Hero image URLs. Pass an odd number; the middle one stays. |
imageAlts | string[] | — | Optional per-image alt text. |
title | string | "Elara Vandenberg" | Title that reveals underneath after the overlay wipes. |
navLogo | ReactNode | "Elara Vandenberg" | Logo / brand mark in the nav. |
navItems | ReactNode[] | ["Runway", "Lookbook", "Campaigns", "Biography"] | Nav link labels. |
overlayStages | string[] | ["Structure", "Designed Identity", "Welcome"] | The captions the marquee cycles through. |
counterDuration | number | 5 | Total counter duration in seconds. |
className | string | — | Extra classes on the outer container. |