Bounce cards

A fan of cards that bounces in with a stagger, then spreads apart and straightens and lifts the one you hover.

New

Dune

Fjord

Ember

Grove

Vapor

Hover a card to straighten and lift it, or click to pick one.

Implementation

1"use client";2 3import { useMemo, useState, type CSSProperties } from "react";4 5export interface BounceCardImage {6  image: string;7  title?: string;8  href?: string;9}10 11export interface BounceCardsProps {12  images?: BounceCardImage[];13  className?: string;14  style?: CSSProperties;15  containerWidth?: number;16  containerHeight?: number;17  cardSize?: number;18  spread?: number;19  rotation?: number;20  arc?: number;21  animationDelay?: number;22  animationStagger?: number;23  bounciness?: number;24  enableHover?: boolean;25  pushDistance?: number;26  hoverScale?: number;27  borderWidth?: number;28  borderColor?: string;