component

Icon rain

Running live. Go ahead and touch it.

Icons on soft halos that fall once and settle at the bottom of the stage, in a pile or a wide rolling row.

See it in the design system

How it behaves

  • Waits until 30% visible, then plays once
  • Replay by changing its key
  • Shows the settled pile under reduced motion

Find more that moves like this

Kind
component
Blueprint
atelier 1.0.5
Moves by
entrance

You can see this at work in Pallet Ross.

Import

import { IconRain } from "@/components/shared/animation/icon-rain";

Props

PropWhat it does
itemsIcons with id and a react-icons icon
labelName of the whole image
countNumber of icons. Defaults to the number of items
variantpile, or floor for a wide rolling row. Defaults to pile
columnsIcons in the pile's bottom row. Defaults to 4
durationSeconds each icon falls. Defaults to 1.3
intervalSeconds between icons. Defaults to 0.09
iconSizeDefaults to 28
classNameMust give the stage a height

Your agent builds it. You take the credit.

Icon rain ships inside the Pallet Ross blueprint. These instructions tell your agent to take only this piece.

Version
1.0.5
Files
190
Dependencies
20
Assets
34

Paste this into Claude Code, Codex, Cursor, or whichever agent you trust today.

  • Building a blueprint runs its code, so use an isolated environment.
  • License: UNLICENSED.
  • Logo names and the spotlight profile name come from a design reference and are not real endorsements. Replace them before any public release.
  • The design and some images derive from a third-party reference. Confirm the rights to the design and images before any public release.
  • Buttons and navigation links have no destinations yet; they are presentational in the original too.
website

Pallet Ross

A creative network landing page where one set of cards travels through pinned scroll stages, from arc to cascade to grid.

component

Spotlight mosaic

A staggered mosaic that opens from its center around one large card; pick a tile and the two trade places.

component

Folder tabs

A folder bar whose tabs swap front and back, with an action slot and an entrance that wipes up.

website

Sixpay

A fintech homepage with detail panels in the navbar, a phone between tilted photos, rotating feature tabs, and a looping carousel of customer stories.