next-animated-cards v1.0.5

Next Animated Cards

A React component library for creating beautiful animated gradient cards with mouse interaction effects.

Screenshots

Installation

npm install next-animated-cards

Usage

import { AnimatedCard, AnimatedCardContent } from 'next-animated-cards';

function MyComponent() {
  return (
    <AnimatedCard
      colors="#4B4D4D 0%, #4B4D4D 20%, #a21caf 40%, #f59e0b 60%, #4B4D4D 80%, #4B4D4D 100%"
      speed="10"
      initialAngle="0deg"
      followMouse={true}
    >
      <AnimatedCardContent>
        Your content here
      </AnimatedCardContent>
    </AnimatedCard>
  );
}

Props

AnimatedCard

AnimatedCardContent

Tailwind CSS Setup

This component uses Tailwind CSS for styling. To use it in your project:

1. Make sure Tailwind CSS is installed in your project:

npm install -D tailwindcss postcss autoprefixer

2. Add the following to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ... your project files
    "./node_modules/next-animated-cards/**/*.{js,jsx,ts,tsx}" // Add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. You can override default styles using className prop:

<AnimatedCard
  className="p-4 rounded-xl bg-blue-500" // This will override default padding and border radius
>
  <AnimatedCardContent>
    Your content here
  </AnimatedCardContent>
</AnimatedCard>

License

MIT