Circle Preloader Hero
A layered circular preloader that expands through four brand colors, throws four floating cutout images across the frame, then sends them outward while the restaurant hero, navigation, footer copy, and plated centerpiece animate into place.
npx shadcn@latest add @compronents/circle-preloader-heroInstalls 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 |
|---|---|---|---|
| itemImages | string[] | 4 BLANK-hosted PNGs | Cutout images thrown across the preloader. |
| logoImage / heroImage | string | BLANK-hosted PNGs | Centered brand mark and final plated centerpiece. |
| navLinks / heading / footer | string[] / string / [string, string] | Restaurant copy | Text revealed after the preloader exits. |
itemImages / logoImage / heroImageasset-urlFloating cutouts, logo, and plated hero image.
navLinks / heading / footertextRestaurant navigation and hero copy.
gsap