Leave a trailof floating memories
npx zenora-ui-registry@latest add falling-image-trail
Falling Image Trail
Hover 405 views•90 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 falling-image-trailWrites to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.
Move the pointer and pictures drop out of it: each one pops in with an elastic squash, gets flung along the way you were moving, lands on the bottom edge and bounces off the frame.
KEY FEATURES
- ·A picture drops each time the pointer has travelled an eighth of the frame's width (a sixth on touch), so faster movement throws more
- ·Each one pops in with an elastic squash and a small random tilt and offset, so no two land alike
- ·Horizontal speed carries into the throw: the picture drifts along the direction you were moving as it falls
- ·It lands with its bottom edge on the frame's floor, then bounces off with a fresh spin, higher the nearer the top it started
- ·Pictures are cycled in order and removed as soon as their fall ends, so the frame never fills up
- ·Pointer and touch both drive it, and it traces a path on its own in previews until you take over
Props
8 propertiesimagesstring[]5 imageslinesstring[]2 imagesbackgroundcolor#fffffftextColorcolor#111111mutedColorcolor#737373fontFamilystringvar(--font-inter)…textScalenumber100autoPlaybooleantrue