Floating Cards

Floating Cards

About Floating Cards

What is Floating Cards?

Floating Cards brings your content to life through continuous idle motion and sophisticated hover interactions. It elegantly displays arrays of data—such as portfolios, services, or features—by fanning them out interactively. With a simple toggle, it adapts into a fully responsive mobile carousel, ensuring a flawless user experience across all devices.

Core Features

  • Dual Responsive Layouts: Automatically transitions between a striking desktop fan array and an intuitive mobile horizontal slider.

  • Sophisticated Physics: Powered by sophisticated spring physics for continuous idle floating, smooth entrance animations, and fluid hover lifts.

  • Deep Customization: Granular control over aesthetics with built-in color presets, corner radius adjustments, and dynamic glow shadows.

  • Native Typography Integration: Visually customize title, subtitle, and button fonts directly from the Framer properties panel.

  • Native Routing: Connect call-to-action buttons directly to internal pages or external URLs using Framer's built-in link controls.

Controls inside Framer

Content Management

  • Cards Array

  • Layout Toggle

  • Show Numbers

  • Show Call to Action

  • Call to Action Text

Typography & Styling

  • Title Font

  • Subtitle Font

  • Call to Action Font

  • Corner Radius

  • Enable Card Shadows

Color & Theming

  • Color Preset Selection

  • Custom Card Background

  • Custom Title and Subtitle Colors

  • Custom Tag Background and Text Colors

  • Custom Number and Accent Colors

Animation & Interaction

  • Fan Arc and Card Spread

  • Fan Origin Point

  • Enable Hover Lift

  • Enable Idle Float

  • Float Intensity

Best use cases

  • Highlighting premium services or core feature sets.

  • Showcasing portfolio projects with interactive depth.

  • Displaying distinct pricing tiers or membership plans.

  • Creating engaging visual navigation menus.

Deliver a deeply engaging, agency-quality aesthetic in seconds. Floating Cards provides complex interaction design out of the box, saving you hours of development time while immediately increasing user engagement.

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.