Dynamic Team Card

Dynamic Team Card

About Dynamic Team Card

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

  1. 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.

  2. 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.

  3. 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.

  4. Content Creator Link-in-Bio:

    • Style: Playful fonts like Poppins.

    • Background: Multi-color mesh gradients.

    • Focus: Full social dock including TikTok and Instagram.