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 https://ui.aryank.space/r/circle-preloader-hero.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 |
|---|---|---|---|
| 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