Dynamic Team Card

Team Card with hover animation

The Team Card is a premium, code-based component designed for modern websites. It provides a sleek way to showcase team members, speakers, or personal profiles. Unlike standard components, this one is built with Framer Motion to ensure high-end fluidity and uses Smart Logic to keep the property panel clean. Key Features: Unified Font Control: Built-in integration with the official Framer Font Picker. Switch between System fonts, Google Fonts, or Custom assets with full control over weight and style. Intelligent Backgrounds: Support for solid colors and linear/radial gradients. The background reacts to the card's tilt animation. Adaptive Social Dock: Includes 7 built-in vector icons (LinkedIn, GitHub, X, Instagram, Facebook, TikTok, and Web). The dock only appears if at least one link is active. Spring Animations: Uses physics-based transitions (stiffness: 260, damping: 20) for a realistic "pop" effect when hovered. Developer-Friendly UI: The property panel uses conditional visibility—link fields only appear when their respective toggle is turned on. Use Case Examples Agency "About Us" Page: Style: Use a clean, sans-serif font like Inter . Background: Soft pastel gradients. Focus: Showcase the creative team with LinkedIn and Web links. Tech Conference Speaker List: Style: Bold typography with JetBrains Mono . Background: Dark mode with vibrant neon gradients. Focus: Highlighting GitHub and X (Twitter) for developers and speakers. Real Estate Agents Gallery: Style: Classic serif font like Georgia . Background: Solid elegant colors (e.g., Deep Navy or Emerald). Focus: Direct links to Instagram and Facebook for property portfolios. Content Creator Link-in-Bio: Style: Playful fonts like Poppins . Background: Multi-color mesh gradients. Focus: Full social dock including TikTok and Instagram.

Team Card with hover animation