# Animated Support Card Component

> This code implements a reusable React component that displays a visually appealing support card.  The card features a concise support tag, a main text message encouraging users to contact support, and a dynamically cycling list of example questions. The cycling effect uses Framer Motion for smooth, animated transitions.  The component solves the problem of creating an engaging and informative support section on a website or application. It enhances user experience by providing easily digestible information and a clear call to action. The component works by first rendering a main card with a header (tag), a descriptive text, and a button to contact support. Below the text is a dynamically updated example question that uses Framer Motion to simulate a typewriter effect. This animation is achieved by sequentially displaying each letter with a short delay, creating a visually engaging experience. The example questions are cycled through at a set interval using `setInterval` and `useState`.  Framer Motion is used to handle the animations, providing smooth transitions for the text and visual effects.  The component uses standard HTML elements like `<div>`, `<p>`, and `<button>`, styled with a presumed CSS framework (inferred from class names like `flex`, `items-center`, and `bg-neutral-100`). This component could be applied in various scenarios, such as help centers, FAQ sections, landing pages, or any part of a web application where a clear and visually appealing support prompt is needed.  For instance, it could be integrated into an e-commerce checkout process, a SaaS dashboard, or a help section within a mobile app. The animation adds an element of dynamism and visual interest, making the support information more memorable and engaging.

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

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/animated-support-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