Landing Counter Reveal
A one-shot intro: a giant 0 to 100 counter scales up from the corner while a progress bar fills, then the digits slide out and a clip-path opens the hero from a center diamond to full frame before the headline characters slide in and the nav and footer words rise.
npx shadcn@latest add https://ui.aryank.space/r/landing-counter-reveal.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| heroImage | string | BLANK-hosted JPG | Image revealed by the clip-path stages. |
| navLinks / footerTags | string[] | 5 nav items / 3 tags | Nav links and footer tag words. |
| headline | string | "Canon" | The large hero headline split into sliding characters. |
navLinks / footerTagslinksThe nav items and the three footer tags.
logo / headlinetextThe wordmark and the large hero headline.
gsap