Animated Card 1

An animated hover card that can showcase almost anything—it all comes down to the caption you choose.

Just find the right caption

This card will tell everything you want

import {
  AnimatedCard,
  CardBody,
  CardDescription,
  CardTitle,
  CardVisual,
} from "@/components/ui/animated-card"
import { Visual1 } from "@/components/ui/visual-1"

export function AnimatedCard1Demo() {
  return (
    <AnimatedCard>
      <CardVisual>
        <Visual1 mainColor="#ff6900" secondaryColor="#f54900" />
      </CardVisual>
      <CardBody>
        <CardTitle>Just find the right caption</CardTitle>
        <CardDescription>
          This card will tell everything you want
        </CardDescription>
      </CardBody>
    </AnimatedCard>
  )
}

Installation


pnpm dlx shadcn@latest add https://badtz-ui.com/r/animated-card-1.json

Usage


import {
  AnimatedCard,
  CardVisual,
  CardBody,
  CardTitle,
  CardDescription,
} from "@/components/ui/animated-card";
import { Visual1 } from "@/components/ui/visual-1";


<AnimatedCard>
  <CardVisual>
    <Visual1 mainColor="#ff6900" secondaryColor="#f54900" />
  </CardVisual>
  <CardBody>
    <CardTitle>Just find the right caption</CardTitle>
    <CardDescription>This card will tell everything you want</CardDescription>
  </CardBody>
</AnimatedCard>

Props

animated-card props.

Prop	Type	Default
`className?`	`string`	-
`props?`	`React.HTMLAttributes<HTMLDivElement>`	-

visual-1 props.

Prop	Type	Default
`mainColor?`	`string`	`"#8b5cf6"`
`secondaryColor?`	`string`	`"#fbbf24"`
`gridColor?`	`string`	`"#80808015"`

Note

Many more cards are coming in the future. If you need a card for a specific theme, feel free to send me a request. If it's something that could benefit many people, I'll build it.

Credits

This component is inspired by Wope

On This Page