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 @compronents/landing-counter-revealInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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