Donation goal
A fundraising goal told in dots: every donation flies in as particles and fills the picture of what it pays for, until the water gathers into a heart.
of £1,000 backers
Things to try
- Give. Pick an amount and press Donate. A stream of dots rises from below the drop and settles at the waterline, so the drop fills by exactly the share you added.
- Watch the numbers. The total and the backer count roll and the bar grows.
- Reach the goal. The water scatters and gathers into a heart, and the buttons give way to a thank-you line. The reset button empties the drop back to where it began.
Install
npx shadcn@latest add https://your-docs-site/r/donation-goal.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @remold-ui/core @remold-ui/react motionHow it works
- One set of dots, always the same size. The drop is sampled once into points, ordered from the bottom up. Every frame draws all of them: a faint copy for the empty drop and a second copy for the water.
fitis the picture's frame, so the drop stays still while it fills. - Filling is moving dots. Water that isn't raised yet waits, invisible, below the drop. A gift moves the next few into their places in the drop, a handful at a time, so they arrive as a stream.
- Colour is a tone. Each dot carries a tone that springs with it, and the palette maps it to empty, water or hidden. The colours come from the card's CSS variables, so they follow dark mode.
- The heart is another shape. At the goal the particles flow into a heart path drawn in the same frame, with a scatter transition, then back into the drop when it starts again.
The campaign and the backers are made up. Swap the drop for the shape of what your campaign pays for: any SVG path works.