Profile Cards 3D

What is Profile Cards 3D?

Profile Cards 3D is a premium interactive card component that combines a hover-triggered image reveal with a buttery 3D flip animation. On the front, a profile image expands from an inset frame to full-bleed on hover, revealing name, bio, stats, and a CTA over a cinematic gradient. On the back, display additional info, an image, or an embedded video. Ideal for team pages, creator spotlights, speaker lineups, and portfolio showcases.

Core Features

• Hover reveal effect with adaptive gradient overlay and smooth image expansion

• 3D card flip triggered by click or hover, with configurable speed and easing

• Three back-face content modes: rich info panel, full-bleed image, or embedded video (YouTube, Vimeo, direct URL)

• Five theme presets — Light, Dark, Midnight, Frost — plus a fully custom palette with eight colour controls

• Integrated social links for X, LinkedIn, Instagram, Dribbble, GitHub, and YouTube

• Clickable CTA button with Framer Link support

• Verified badge, dual stat counters with accessible labels, and independent font controls

• Keyboard accessible with ARIA labels and prefers-reduced-motion support

Controls inside Framer

Front Content

• Profile photo (responsive image)

• Name, role, and bio text

• Verified badge toggle

• Two configurable stat values with accessible labels

• CTA button text and link

Back Content

• Back type selector: Image, Video, or Info

• Back image upload (responsive image)

• Video URL field (YouTube, Vimeo, or direct)

• Info panel: title, description, location, website with link, comma-separated skill tags

• Six social link fields (X, LinkedIn, Instagram, Dribbble, GitHub, YouTube)

Style

• Theme preset: Light, Dark, Midnight, Frost, Custom

• Border radius control (0–40px)

• Custom colour palette: background, text, secondary, accent, badge, CTA background, CTA text, stat icons

Animation

• Flip trigger: Click or Hover

• Flip speed (300–1200ms)

• Hover reveal speed (200–1000ms)

Typography

• Independent font controls for name, bio, stats, and CTA

Default size

376 x 407 px — resizable on canvas.

Best use cases

• Team and about pages — present each member with depth beyond a static headshot

• Creator and influencer profiles — showcase follower counts, portfolios, and social links in one interactive card

• Speaker and event lineups — flip to reveal bios, topics, or intro videos

• Portfolio showcases — use the image or video back face to highlight featured work

Profile Cards 3D turns a static headshot grid into an interactive experience that keeps visitors engaged and exploring.

Questions or custom requests?

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