Components→Card

Card

Motion-first card component with spring physics, hover lift, and smooth transitions. Includes sub-components for images, content, and actions.

Layout

Interactive Card

Cards respond to hover and press with subtle animations by default.

Static Card

This card has interactions disabled using the static prop.

Installation

Copy and paste

Copy the component source code and paste it into your project.

import { Card, CardContent, CardImage, CardActions } from "driftkit";

Props

Name	Type	Required	Description
`variant`	`"default" \| "outlined" \| "elevated"`	No	Visual variant. Default has subtle border, outlined has thick border, elevated has enhanced shadow.
`size`	`"sm" \| "md" \| "lg"`	No	Affects text size and overall scale of the card.
`static`	`boolean`	No	Disables hover and press interactions for non-interactive cards.
`animated`	`boolean`	No	Enables enter animation when card mounts. Use with CardGrid for staggered effects.
`delay`	`number`	No	Animation delay in seconds for staggered entrance effects.
`children`	`ReactNode`	Yes	Card content - typically CardImage, CardContent, and CardActions components.

🎮

Playground

Tune spring physics for this component

Live Preview

Spring Physics

StiffnessiHow quickly the animation reaches its target. Higher values create snappier animations.300

DampingiHow much the animation resists motion. Lower values create more bounce and overshoot.30

MassiHow heavy the element feels during animation. Higher values make animations slower with more momentum.1

Generated Code

const springConfig = {
  "type": "spring",
  "stiffness": 300,
  "damping": 30,
  "mass": 1
};

// Basic hover animation
<motion.div
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={springConfig}
>
  <Card />
</motion.div>

// Advanced with custom animations
<motion.div
  animate={{ 
    scale: [1, 1.02, 1],
    y: [0, -4, 0]
  }}
  transition={{
    ...springConfig,
    repeat: Infinity,
    repeatDelay: 2
  }}
>
  <Card />
</motion.div>

Stiffness: Controls animation speed. Higher values create snappier animations.

Damping: Controls resistance to motion. Lower values create more bounce and overshoot.

Mass: Controls the perceived weight. Higher values make animations slower with more momentum.

Source Code

View the source code on GitHub to see the full implementation.

View on GitHub