Spark UI
Falling Image Trail

Customize

Images10 images
Lines2 items
Background
Text Color
Muted Text
Font
Text Scale
100%
Auto Play

Falling Image Trail

Hover
405 views•90 uses

Props

8 properties
imagesstring[]10 images
Pictures that drop, cycled in order.
linesstring[]2 images
Two lines at the centre; the second is shown muted.
backgroundcolor#121212
Colour behind everything.
textColorcolor#f1f1f1
Colour of the first line.
mutedColorcolor#999999
Colour of the second line.
fontFamilystringvar(--font-inter)…
Typeface for the lines.
textScalenumber100
Relative size of the text.
autoPlaybooleantrue
Traces a path on its own until the pointer is used.

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add falling-image-trail

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

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