Hover Cards 3D: Premium Interactions Component by Aidan Looker

Feature cards that transform into an overlapping 3D fan on hover. Five curated theme presets, per-card CTA buttons with slide-fill animations, and full control over rotation, depth, and spread. Built for hero sections, feature showcases and product highlights.

What is Hover Cards 3D?

Hover Cards 3D is a premium interaction component that transforms a row of feature cards into an overlapping, perspective-driven 3D fan when the user hovers over the container. Each card rotates on the Y-axis, shifts in depth, and scales dynamically to create a natural deck-of-cards effect. Ideal for SaaS feature sections, agency portfolios, product benefit breakdowns, and any layout where static cards fall flat.

Core Features

Five built-in theme presets — Clean, Midnight, Ocean, Ember, and Frost — with a Custom mode for full colour control
3D perspective fan effect with configurable rotation, spread, depth, and center scale
Per-card CTA buttons with a premium slide-fill hover animation and individual text and link controls
Responsive scaling that automatically adjusts the 3D effect intensity based on container width
Smooth, performant CSS transitions with three speed modes and three easing curves

Controls inside Framer

Theme

Theme preset selector — Clean, Midnight, Ocean, Ember, Frost, or Custom

Cards

Up to 5 cards, each with title, description, image, button text, and button link

Layout

Gap between cards
Border radius
Card padding

Colors (Custom theme only)

Card background
Title colour
Description colour
Shadow colour

3D Effect

Rotation — Y-axis tilt angle for side cards
Spread — horizontal offset that controls overlap intensity
Depth — Z-axis separation between center and side cards
Center Scale — scale multiplier for the focused center card

Animation

Speed — Fast, Medium, or Slow
Easing — Smooth, Snappy, or Bouncy

CTA Button

Show or hide buttons globally
Button colour and text colour

Typography

Font family and weight

Best use cases

SaaS and startup landing pages to showcase three to five key product features with depth and motion
Agency and portfolio sites to present service offerings or case study categories with a premium interaction
Product and pricing pages to highlight plan benefits or feature tiers in a visually engaging layout
Marketing microsites where a single hero interaction needs to communicate value within seconds

Drop HoverCards3D into any section and turn a flat feature grid into a dimensional, interactive showcase that holds attention and drives clicks.