Info Cards 3D — 3D flip cards with hover effects.

What is Info Cards 3D?

Info Cards 3D is a configurable grid of interactive service cards built for showcasing offerings, features, or capabilities on any Framer site. Each card features a 3D flip interaction triggered by a dedicated button, a cursor-tracked radial colour reveal on hover, and staggered back-face content animations. Ideal for agency service pages, SaaS feature sections, portfolio highlights, and product overviews.

Core Features

• 3D Y-axis card flip with spring physics, triggered by a dedicated plus/close button

• Cursor-tracked radial circle reveal that expands from the exact hover entry point

• Staggered back-face content animation with title, description, and slide-fill CTA button

• 30 built-in line-art icons plus custom image upload support for complete brand flexibility

• Floating icon animation with decorative sparkle accents on the front face

• Responsive grid layout with configurable columns (1-6), gap, and left/center/right alignment

Controls inside Framer

Cards

• Icon — choose from 30 presets or upload a custom image

• Title — front-face heading text

• Description — back-face body copy

• Button Text — CTA label on the back face

• Button Link — native Framer link picker with full page/URL/section support

Layout

• Columns — 1 to 6 column grid

• Gap — spacing between cards

• Alignment — left, center, or right positioning

Colors

• Card Background — front-face fill colour

• Hover / Back Background — radial reveal and back-face colour

• Icon — icon stroke colour

• Text — front-face text colour

• Accent — hover text, back-face text, and CTA colour

Card Style

• Corner Radius — card border radius

• Padding — internal card spacing

Animation

• Flip Speed — slow, medium, or fast spring timing

• Hover Transition — speed of text colour inversion on hover

• Stagger Content — toggle staggered back-face content entrance

Typography

• Font — custom font family and weight via Framer font picker

Best use cases

• Agency and studio service pages with 3-6 core offerings

• SaaS and product feature grids that need interactive depth

• Portfolio or capability showcases requiring visual engagement

• Landing page sections where hover interaction drives exploration

Each card is self-contained with its own flip state, hover tracking, and animation.

Questions or custom requests?

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