pleate.uiEffects
Interactive

Bounce Cards

A fan of photo cards that bounce in when they come into view. The hovered or focused card straightens and lifts while its neighbours lean away.
import { BounceCards } from "pleate/effects/bounce-cards";

Album

  • River winding through a green valley
  • Red rock canyon
  • Mountains under a blue sky
  • Waterfall in a forest
  • Castle on a hill

Props

images

Pictures; alt is required.

{ src, alt }[]

cardWidth / cardHeight

Card size in px.

numberdefault 180 / 220

overlap

Distance between card centers in px.

numberdefault 110

fanAngle

Tilt of the outer cards in degrees.

numberdefault 10

stagger

Delay between cards on entrance, seconds.

numberdefault 0.08

Accessibility

  • Cards are focusable and react to focus like hover.
  • Reduced motion shows the fan without the bounce.