CardSwap

CardSwap

About CardSwap

Designed to feel lively without being distracting, it works great in hero sections, landing pages, or app previews.

Features

  • Animated image swaps: Smooth transitions between image sets with directional motion.

  • Icon-based navigation: Clickable icons let users switch categories instantly.

  • Auto-play support: Automatically cycles through categories after a delay.

  • Fully customizable content: Change images, labels, icons, and colors directly in Framer.

  • Clean, modern layout: Fixed tilt and spacing ensure consistent visual balance.

How it works

  • Each icon represents a unique category.

  • Clicking an icon:

    • Current images slide out.

    • New images zoom in from below.

  • If untouched, the component auto-rotates through all categories.

Customization options

Inside the Framer properties panel, you can:

  • Replace image sets for each category.

  • Change labels (e.g., Food, Travel, Shopping).

  • Change Colours (e.g. Background, Text and Icon)

  • Swap icons.

Perfect for

  • Product category highlights

  • App feature showcases