---
title: "Dynamic Team Card — Framer component · Best of Framer"
description: "$1.00 · Framer component · by Bautista Calvo · Cards. Team Card with hover animation"
canonical: "https://framer.elliotli.dev/component/dynamic-team-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Dynamic Team Card

# Dynamic Team Card

Team Card with hover animation

[View on Framer](https://framer.com/marketplace/components/dynamic-team-card/?via=elliot-li)

![Dynamic Team Card preview image 1](https://framer.elliotli.dev/og/component/dynamic-team-card/06f27e456504d70a/1600x1200.jpg)

## Summary

Team Card with hover animation

## Description

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.
        

## Rank history [How rankings work →](/terms#rankings)

-   All · #8429

## Details

- **Author**: Bautista Calvo
- **Price**: $1.00
- **Published**: 2026-01-20
- **Updated**: 2026-02-05
- **Added**: 2026-01-07
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator