# Animated Logo Rolodex

> This code creates a visually appealing animated logo rolodex using React, Framer Motion, and Tailwind CSS.  It showcases a rotating display of logos, each with a unique background color. The component solves the problem of dynamically displaying multiple logos in an engaging manner, ideal for showcasing brand partnerships, sponsors, or team members.   Here's how it works:  1. **Logo Data:**  The `DivOrigami` component passes an array of logo elements (`LogoItem` components) to the `LogoRolodex` component. 2. **Rotation Logic:** `LogoRolodex` uses `setInterval` to increment an index, cycling through the logo array.  `useEffect` with a cleanup function ensures the interval is cleared when the component unmounts. 3. **Framer Motion Animation:**  Two `motion.div` elements are used to create the flipping card effect. `AnimatePresence` ensures smooth transitions when the index changes.  Each `motion.div` displays the current logo, with one transitioning out (`rotateX: -180deg`) while the next transitions in (`rotateX: 0deg`).  The `clipPath` property creates the half-card effect, creating the illusion of a flipping card. 4. **Styling:** Tailwind CSS is used for styling, providing a clean and efficient way to manage the component's visual appearance.  The `twMerge` helper function combines class names seamlessly. 5. **Logo Items:** The `LogoItem` component renders each individual logo with a styled background and icon.   This component can be applied in various scenarios, including:  * **Website headers:** Displaying featured partners or sponsors. * **About Us sections:** Showcasing team members or collaborators. * **App onboarding:** Presenting key features or integrations.  The code leverages several key technologies:  * **React:** For building the user interface. * **Framer Motion:** For creating smooth and engaging animations. * **Tailwind CSS:** For rapid and responsive styling. * **React Icons:** For providing easily integrated logo icons. * **`setInterval` and `useEffect`:** For managing the animation loop and cleanup.  The animation is smooth and visually engaging, enhancing user experience by presenting information in a dynamic and memorable way.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: react-icons, framer-motion, tailwind-merge
- Live preview: https://21st.dev/@uniquesonu/components/animated-logo-rolodex

## Install

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