About Bio Overlay
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
