Chapter 4: Cards & Grids

Core Idea

Card components and grid layouts with hover/tilt/perspective interactions — the largest category in the free catalogue, covering everything from simple hover states to full 3D card physics.

Reference Table

Name	Purpose	Install
3D Card Effect	Perspective tilt that elevates card elements on hover	npx shadcn@latest add @aceternity/3d-card-effect
3D Animated Pin	Gradient pin that animates on hover, for product links	npx shadcn@latest add @aceternity/3d-pin
3D Globe	Interactive globe with tooltips/avatar pins	npx shadcn@latest add @aceternity/3d-globe
3D Marquee	3D grid marquee, good for testimonial/hero showcases	npx shadcn@latest add @aceternity/3d-marquee
Bento Grid	Skewed grid layout with title/description/header slots	npx shadcn@latest add @aceternity/bento-grid
Card Spotlight	Radial-gradient spotlight revealed on a card	npx shadcn@latest add @aceternity/card-spotlight
Card Stack	Cards stack and cycle on an interval — good for testimonials	npx shadcn@latest add @aceternity/card-stack
Cards	A generic set of card layouts for varied use cases	npx shadcn@latest add @aceternity/cards-free
Comet Card	3D tilt card (as seen on Perplexity Comet)	npx shadcn@latest add @aceternity/comet-card
Compare	Slide/drag comparison between two images	npx shadcn@latest add @aceternity/compare
Direction Aware Hover	Hover effect that reacts to the cursor's entry direction	npx shadcn@latest add @aceternity/direction-aware-hover
Draggable Card	Tiltable, draggable card with bounce-back on release	npx shadcn@latest add @aceternity/draggable-card
Evervault Card	Hover effect revealing encrypted-looking text + gradient	npx shadcn@latest add @aceternity/evervault-card
Expandable Cards	Cards that expand on click to show more detail	npx shadcn@latest add @aceternity/expandable-card
Focus Cards	Hover a card to focus it and blur the rest	npx shadcn@latest add @aceternity/focus-cards
Glare Card	Hover glare effect (as seen on Linear)	npx shadcn@latest add @aceternity/glare-card
Glowing Background Stars Card	Card with animated background stars	npx shadcn@latest add @aceternity/glowing-stars-effect
Glowing Effect	Border glow that adapts to any container/card (as seen on Cursor)	npx shadcn@latest add @aceternity/glowing-effect
GitHub Globe	Interactive globe animation (as seen on GitHub's homepage)	npx shadcn@latest add @aceternity/github-globe
Hover Effect	Sliding highlight that follows the currently hovered card	npx shadcn@latest add @aceternity/card-hover-effect
Layout Grid	Grid where clicking an item animates a shared-layout transition	npx shadcn@latest add @aceternity/layout-grid
Lens	Zoom lens over an image/video/any content	npx shadcn@latest add @aceternity/lens
Parallax Grid Scroll	Two-column grid scrolling in opposite directions	npx shadcn@latest add @aceternity/parallax-scroll
Pixelated Canvas	Converts an image to a pixelated canvas with mouse distortion	npx shadcn@latest add @aceternity/pixelated-canvas
SVG Mask Effect	Cursor-driven mask reveal over hidden content	npx shadcn@latest add @aceternity/svg-mask-effect
Wobble Card	Card that translates/scales on mouse movement	npx shadcn@latest add @aceternity/wobble-card

Key Takeaways

1. For a feature/pricing grid with mixed content sizes, start with Bento Grid rather than hand-rolling a CSS grid.
2. Multiple entries solve "make this card interesting on hover" (Direction Aware Hover, Evervault Card, Glare Card, Wobble Card, Card Spotlight) — pick one per card type, don't combine two hover treatments on the same card.
3. 3D Globe / GitHub Globe need three + @react-three/fiber as extra peer dependencies beyond the standard Motion stack.

Connects To

• ch002 (Backgrounds & Ambient Effects): several of these effects are card-scoped versions of full-page backgrounds.
• ch008 (Carousels & Testimonials): Card Stack overlaps with testimonial use cases.