npx zenora-ui-registry@latest add counter-loader-hero
Counter Loader Hero
Animations 220 views•5 uses
Get this component
Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.
npx zenora-ui-registry@latest add counter-loader-heroWrites to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.
A site intro that becomes the hero: while a counter climbs to 100, cards pop in around a turning ring that circles a centre monogram. At 100 the ring draws in to a single stack, then every card bursts out into a slowly rotating 3D cloud of pictures you can lean and drag.
KEY FEATURES
- ·A zero-padded counter climbs to 100 on an ease-in-out curve while the name and role decode letter by letter
- ·Ring cards pop in one by one as the ring turns, each counter-rotating so its picture stays upright
- ·At 100 the text lifts out of clipping masks and the ring draws in until the cards stack at the centre
- ·The stack bursts into a 3D sphere of cards spread on a Fibonacci lattice, with perspective scale, depth ordering and depth fade
- ·The cloud turns on its own, leans toward the pointer and spins with momentum when dragged
- ·A timeline runs the intro and a single render loop owns the cloud, so the two never write the same transforms
Props
17 propertiesitemsstring[]15 imagesringCountnumber10namestringMotion LibrarymonogramstringZenora UIrolestringCrafted for the W…loadDurationnumber2.8ringSpinnumber40cloudSizenumber100cloudSpeednumber50scramblebooleantruebackgroundcolor#ffffffcardColorcolor#f1f1f0textColorcolor#141414fontFamilystringvar(--font-host-g…accentFontstringvar(--font-instru…textScalenumber100autoPlaybooleanfalse
