Morph Cards

Morph Cards
Morph Cards

About Morph Cards

Morph Cards

Create fluid, shape-driven card interactions where every card transforms as you explore the gallery.

Morph Cards goes beyond a simple hover effect. When a card becomes active, it smoothly expands, changes its proportions, lifts, rounds its corners, zooms its image, and reveals its content while the surrounding cards compress around it.

The result is a cinematic, editorial-style card layout designed for modern Framer websites.

Preview

https://morphcards.framer.website/

Great for

  • Creative agency websites

  • Portfolio projects

  • Product showcases

  • Photography websites

  • Architecture and interior design

  • Fashion and editorial websites

  • Case study sections

  • Art and culture websites

  • SaaS feature showcases

  • Interactive landing pages

  • Experimental Framer websites

Features

  • Shape-driven card morphing

  • Active card expansion

  • Inactive card compression

  • Independent active and inactive heights

  • Adjustable card proportions

  • Active card lift animation

  • Dynamic border-radius transitions

  • Image zoom on activation

  • Smooth image scaling

  • Animated content reveal

  • Optional descriptions

  • Custom typography with Framer Font controls

  • Custom easing presets

  • Adjustable animation duration

  • Custom overlay color

  • Custom title and description colors

  • Optional card borders

  • Adjustable card spacing

  • Up to 8 editable cards

  • Image controls for every card

  • Keyboard navigation

  • Focus states

  • Reduced-motion support

  • Static renderer support

  • Lightweight CSS-based animation

  • No external animation libraries

  • Responsive Framer layout support

Support

Need help customizing Morph Cards or using it in your Framer project?

Email: karimsaif010@gmail.com

X: https://x.com/karimsaif0

I'm happy to help with setup, customization, and usage questions.