BounceCards
bounce-cardsFans image cards into place with springy hover and entrance motion.
Usage
Basic usage (pictures)
Pass the images array, and each picture is rendered as a card. When entering, the cards will be popped in one by one, hovering and pushed to give way.
<BounceCards
images={["/1.jpg", "/2.jpg", "/3.jpg", "/4.jpg", "/5.jpg"]}
containerWidth={460}
containerHeight={240}
/>Customize card content
Replace images with children, and each child node is rendered into a card (the number determines the number).
<BounceCards containerWidth={460} containerHeight={240}>
<Swatch label="01" />
<Swatch label="02" />
<Swatch label="03" />
<Swatch label="04" />
<Swatch label="05" />
</BounceCards>Custom sector + Close hover
transformStyles Customize the rotation/displacement of each card, enableHover={false} turns off push interaction.
<BounceCards
containerWidth={420}
containerHeight={220}
enableHover={false}
transformStyles={[
"rotate(8deg) translate(-110px)",
"rotate(-2deg)",
"rotate(-8deg) translate(110px)",
]}
>
{cards.slice(0, 3)}
</BounceCards>More exaggerated pushing distance
pushDistance Increase the size to make the cards on both sides give way more obviously when hovering.
<BounceCards
containerWidth={460}
containerHeight={240}
pushDistance={220}
>
{cards}
</BounceCards>When to use
Use BounceCards for a small fanned stack of images or cards that enters sequentially and makes room around the hovered item, often in a marketing hero or album preview. Use CardSwap for an automatically cycling 3D stack, ChromaGrid for a spotlight card wall, or Table for structured data. children take precedence over images.
Import
import { BounceCards } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| images | string[] | — | Image URLs aligned by index with transformStyles; mutually exclusive with children. |
| containerWidth | number | 400 | Container width in pixels. |
| containerHeight | number | 400 | Container height in pixels. |
| animationDelay | number | 0.5 | Delay in seconds before entrance begins. |
| animationStagger | number | 0.06 | Seconds between adjacent card entrances. |
| transformStyles | string[] | Five-card fan | Per-card transforms; entries beyond the array receive no transform. |
| enableHover | boolean | true | Whether the hovered card straightens and neighbors move aside. |
| pushDistance | number | 160 | Neighbor displacement in pixels. |
| className | string | — | Root class name. |
| style | CSSProperties | — | Root inline styles. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode[] | Custom cards replacing image rendering; count and transforms align by index. |
Example
<BounceCards containerWidth={460} containerHeight={240}>
{[<Swatch key="1" label="01" />, <Swatch key="2" label="02" />, <Swatch key="3" label="03" />]}
</BounceCards>Custom fan without hover:
<BounceCards enableHover={false} transformStyles={["rotate(8deg) translate(-110px)", "rotate(-2deg)", "rotate(-8deg) translate(110px)"]}>{cards}</BounceCards>Usage guidelines
- children override images when both are present.
- transformStyles align by index. Add transforms for custom card counts or extra cards stack at the origin.
- animationDelay and animationStagger are seconds, not milliseconds.
- Reduced motion skips the bounce entrance.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<BounceCards
images={["/1.jpg", "/2.jpg", "/3.jpg", "/4.jpg", "/5.jpg"]}
containerWidth={460}
containerHeight={240}
animationDelay={0.5}
animationStagger={0.06}
pushDistance={160}
enableHover={true}
/>