Cards

Card composition patterns for content display, interaction, and layout.

3D Product Cards

Block preview — compose from component imports

3D Product Cards

Mouse-tracking 3D tilt cards with layered content and image.

IO Context

Use for featured products where physical tactility enhances perceived value. Limit to 3-4 per viewport.

Components used

3D Card Effect

bash

// Install the components used in this block
npx shadcn@latest add @aceternity/3d-card-effect

Focus Gallery

Block preview — compose from component imports

Image card grid where hovering one focuses it and blurs the rest.

IO Context

The blur-focus pattern creates natural hierarchy on demand. Use with high-quality images.

Components used

Focus Cards

bash

// Install the components used in this block
npx shadcn@latest add @aceternity/focus-cards

Expandable Card List

Block preview — compose from component imports

Vertical list of cards that expand into full detail views with shared layout animations.

IO Context

Ideal for team profiles, project showcases, or feature deep-dives with preview and detail states.

Components used

Expandable Card

bash

// Install the components used in this block
npx shadcn@latest add @aceternity/expandable-card

Glowing Feature Cards

Block preview — compose from component imports

Feature cards with animated glowing border that traces the outline.

IO Context

The glow draws attention to 1-2 featured cards per section. Use IO purple for the glow color.

Components used

Glowing EffectCard Spotlight

bash

// Install the components used in this block
npx shadcn@latest add @aceternity/glowing-effect
npx shadcn@latest add @aceternity/card-spotlight