Bio Overlay — A responsive biography overlay for profile or team cards that opens on click, adapts to all screen sizes, supports scrolling on mobile, and includes gradient backdrops.

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