Feature Name
Short description of the feature
AnimatedCard
Card component with lift, scale, shine, and flip variants.
Preview/Playground
Created by 
Barsan
Feature Name
Short description of the feature
Shine Effect
Beautiful shine animation
Astro import AnimatedCard from '@astroanimate/core/AnimatedCard';
<AnimatedCard
title="Feature Name"
description="Short description of the feature"
variant="lift"
color="rose"
/>
<AnimatedCard
title="Feature Name"
description="Short description of the feature"
variant="scale"
color="emerald"
/>
<AnimatedCard
title="Feature Name"
description="Short description of the feature"
variant="shine"
color="violet"
/>Installation
bash
npm install @astro-animate/cardUsage
import AnimatedCard from '@astroanimate/core/AnimatedCard';
<AnimatedCard
title="Feature Name"
description="Short description of the feature"
variant="lift"
color="rose"
/>Displays a themed card with lift animation on hover.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Card heading (required) |
description | string | - | Card body text (required) |
variant | "lift" | "scale" | "flip" | "shine" | "lift" | Animation style |
color | "rose" | "emerald" | "violet" | "amber" | "rose" | Theme color |
selected | boolean | false | Shows "Selected" badge |
selectedOnScroll | boolean | false | Shows indicator on scroll (35% visibility threshold, -12% root margin, fires once) |
class | string | "" | CSS class name (merged with customClass) |
customClass | string | "" | Additional CSS class (merged with class) |
style | string | "" | Inline styles |
href | string | - | Renders as link when provided |
target | string | - | Link target attribute |
rel | string | - | Link rel attribute |
backTitle | string | - | Back face heading (flip variant) |
backDescription | string | "Tap or click the button below to flip this card back." | Back face description |
backButtonText | string | "Flip Back" | Flip button text |
flipHint | string | "Flip to reveal more details" | Flip instruction text |
iconLabel | string | "✦" | Fallback icon character |
minHeight | string | "18rem" | Minimum card height |
ariaLabel | string | - | Custom ARIA label |
Slots
| Slot | Description |
|---|---|
icon | Custom icon content |
back-content | Custom back face content (flip variant). Note: flip-back button always renders after this slot |
CSS Custom Properties
Override these variables to customize styling:
| Property | Default | Description |
|---|---|---|
--animated-card-radius | 1.5rem | Card border radius |
--animated-card-padding | 1.5rem | Card padding |
--animated-card-shadow | 0 14px 30px rgba(2, 6, 23, 0.24), 0 2px
10px rgba(2, 6, 23, 0.2) | Default box shadow |
--animated-card-shadow-active | 0 28px 52px rgba(2, 6, 23, 0.42), 0 0 0 1px
rgba(255, 255, 255, 0.03) | Active state shadow |
--animated-card-title-size | 1.25rem | Title font size |
--animated-card-icon-size | 3.5rem | Icon container size |
--animated-card-accent | (theme-dependent) | Accent color |
--animated-card-accent-text | (theme-dependent) | Accent text color |
--animated-card-border | (theme-dependent) | Border color |
--animated-card-soft | (theme-dependent) | Soft background color |
--animated-card-aura | (theme-dependent) | Ambient glow color |
--animated-card-surface | (theme-dependent) | Front face background |
--animated-card-back-surface | (theme-dependent) | Back face background |
--animated-card-inset | (theme-dependent) | Inner glow color |
Responsive Design
At max-width: 640px:
- Padding reduces to 1.25rem
- Border radius reduces to 1.25rem
- Title font size reduces to 1.12rem
- Description font size reduces to 0.92rem
Use When
- Displaying feature cards with hover effects
- Creating interactive product showcases
- Building navigation or selection cards
- Showing expandable content with flip variant
Avoid When
- Simple static cards without animation needs
- Content requiring complex interactive forms
- Scenarios requiring zero JavaScript (flip variant)
- Performance-critical pages with many cards (GPU load from multiple animated elements)
Notes
- Lift, scale, and shine variants render a meta row at the bottom showing "[variant] interaction" with a colored dot
- Flip variant uses CSS 3D transforms for card flipping animation
Accessibility
- Respects prefers-reduced-motion media query
- Includes ARIA labels and focus-visible states
- Keyboard navigation for flip variant (Enter/Space)
- Decorative elements marked with aria-hidden
Performance Notes
- CSS-driven architecture with zero hydration for non-flip variants
- Minimal JavaScript only for flip keyboard interactions and scroll-based selection
- Uses IntersectionObserver for scroll-based indicator (passive listener)
Credits
- Credit to @vipin
