Cards

Overview

A beautiful collection of animated card components with unique effects and interactions. Each card is built with Framer Motion and modern CSS, perfect for creating engaging and dynamic user interfaces.

Variants

Glass Card

A frosted glass card with backdrop blur, subtle lift animation, and an elegant glassmorphism effect.

Expandable Card

A collapsible card with smooth height animation and accessible ARIA states.

Spotlight Card

A modern card with a dynamic spotlight effect that changes color based on mouse position.

Card Stack

An interactive stack of cards that cycles through on click. Perfect for showcasing multiple items or steps.

Shimmer Card

A card with an animated conic gradient border that creates a premium shimmer effect.

All Card Variants

Here's a complete showcase of all card components:

Installation

Dependencies

npm install framer-motion clsx tailwind-merge

All card components require Framer Motion for animations and the cn utility from @/lib/utils for className merging.

Usage Examples

Glass Card

import { GlassCard } from '@/components/aesthe-ui/cards/card-glass'

export default function MyComponent() {
  return (
    <GlassCard hoverLift={true}>
      <h3>Beautiful Glass Effect</h3>
      <p>Content goes here</p>
    </GlassCard>
  )
}

Expandable Card

import { ExpandableCard } from '@/components/aesthe-ui/cards/card-expanable'

export default function MyComponent() {
  return (
    <ExpandableCard title="Click to expand" defaultOpen={false}>
      Hidden content that appears when expanded
    </ExpandableCard>
  )
}

Spotlight Card

import { CardSpotlight } from '@/components/aesthe-ui/cards/card-spotlight'

export default function MyComponent() {
  return (
    <CardSpotlight intensity={1.2}>
      <h3>Dynamic Spotlight</h3>
      <p>Move your mouse to see the effect</p>
    </CardSpotlight>
  )
}

Card Stack

import { CardStack } from '@/components/aesthe-ui/cards/card-stack'

export default function MyComponent() {
  const items = [
    <p key="1">First card content</p>,
    <p key="2">Second card content</p>,
    <p key="3">Third card content</p>,
  ]
  
  return <CardStack items={items} />
}

Shimmer Card

import { ShimmerCard } from '@/components/aesthe-ui/cards/card-shimmer'

export default function MyComponent() {
  return (
    <ShimmerCard thickness={2}>
      <h3>Premium Border</h3>
      <p>With animated shimmer effect</p>
    </ShimmerCard>
  )
}

Props

GlassCard Props

• hoverLift (boolean, default: true) - Enable hover lift animation
• All standard HTML div attributes

ExpandableCard Props

• title (string, required) - The card header title
• defaultOpen (boolean, default: false) - Initial expanded state
• All standard HTML div attributes

CardSpotlight Props

• intensity (number, default: 1) - Spotlight effect intensity
• All standard HTML div attributes

CardStack Props

• items (React.ReactNode[], required) - Array of card contents
• className (string, optional) - Additional CSS classes

ShimmerCard Props

• thickness (number, default: 1.5) - Border thickness in pixels
• All standard HTML div attributes

Customization

Each card component accepts a className prop for custom styling:

<GlassCard className="max-w-md mx-auto">
  Custom styled content
</GlassCard>

You can also modify the component files directly to adjust colors, animations, and default styles to match your brand.