---
title: "Bio Overlay — Framer component · Best of Framer"
description: "$15.00 · Framer component · by BSS Digital Agency · Interactive. Bio Overlay makes your team section come alive ✨ Add interactive biography popups to any profile or team card —…"
canonical: "https://framer.elliotli.dev/component/bio-overlay"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Bio Overlay

# Bio Overlay

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

![Bio Overlay preview image 1](https://framer.elliotli.dev/og/component/bio-overlay/d080e02234cf8e5b/1600x1200.jpg)

## Summary

Bio Overlay makes your team section come alive ✨ Add interactive biography popups to any profile or team card — responsive, scrollable, and beautifully animated.

## Description

## Bio Overlay makes your team section come alive ✨

Add interactive biography popups to any profile or team card — responsive, scrollable, and beautifully animated. Now with full control over typography, so you can match your project’s design perfectly.

## 🧩 How it works

-   Place the component **on top of your team member’s card** (set **Size → Fill**)
    
-   Clicking the image, name, or title automatically opens the biography overlay
    
-   The overlay adjusts dynamically — clean, centered, and adaptive to every screen size
    
-   Works seamlessly on **desktop, tablet, and mobile**
    

## ⚙️ Available inputs

-   **Name** – Person’s full name
    
-   **Title** – Their role or position
    
-   **Image** – Optional profile photo
    
-   **Biography** – The main text shown in the overlay (scrollable and supports line breaks)
    
-   **Backdrop style** – Choose between _None_, _Subtle_, _Dark_, or _Gradient_
    
-   **Typography** – Select title and body fonts directly from **Framer’s font library**
    
-   **Max width** – Control how wide the overlay appears on desktop
    
-   **Edge fade** – Adjust the smooth gradient fade on the backdrop
    

## 💡 Features

-   Fully responsive layout that adapts to every screen size
    
-   Auto-adjusting height on mobile (no more full-screen white backgrounds)
    
-   Scrollable biography with natural paragraph spacing 📱
    
-   Customizable **title and body fonts** using Framer’s font selector ✍️
    
-   Soft gradient or dark backdrop options 🌫️
    
-   ESC and click-outside to close
    
-   Automatically locks background scrolling
    
-   Clean, one-component setup — no coding required
    

## 🚀 Perfect for

-   Team or “About Us” sections
    
-   Speaker lists and contributors
    
-   Personal portfolios or author profiles
    
-   Any project where you want to add interactive storytelling effortlessly
    

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

-   All · #10839

## Details

- **Author**: BSS Digital Agency
- **Price**: $15.00
- **Published**: 2025-10-14
- **Updated**: 2025-10-14
- **Added**: 2025-10-06
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step