# Squishy Card Component

> This code implements a visually appealing and interactive card component using the Framer Motion library.  The component features a card with a price and description, overlaid on an animated background.  On hover, the card scales slightly, and the background elements (a circle and an ellipse) morph dynamically, creating a 'squishy' effect.  This solves the problem of creating engaging and memorable UI elements, enhancing user experience.   Here's a step-by-step breakdown:  1. **`SquishyCard` Component:** This is the main container, providing basic styling and layout. It houses the `Card` component. 2. **`Card` Component:** This component uses `motion.div` from Framer Motion to enable animations. The `whileHover` prop applies animations on hover. The `variants` prop defines the animation states ('hover' in this case), specifying a scale increase.  `transition` sets the animation's duration and easing function. 3. **`Background` Component:** This component generates the animated background using `motion.svg`. It contains a `motion.circle` and `motion.ellipse` which are individually animated on hover, creating the 'squishy' effect.  Each shape's animation is also controlled using `variants` and `transition`, with a small delay added to the shapes' animations for better visual flow. 4. **Framer Motion:** This library is fundamental to this code, providing the animation capabilities. It allows for smooth and declarative animations through the use of variants and transitions.  The `whileHover`, `variants` and `transition` properties are key to the animations.  This component can be used in various scenarios such as pricing cards, product showcases, or any situation where a visually engaging and interactive element is needed.  The customizable nature of the colors, text, and shapes allows for flexibility in adapting the component to different design styles and contexts.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@uniquesonu/components/squishy-card-component

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/squishy-card-component?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt