57:I[473921,["/creators-assets/_next/static/immutable/chunks/3c-b-8ufmviux.js","/creators-assets/_next/static/immutable/chunks/2lb80c7sdmm1x.js","/creators-assets/_next/static/immutable/chunks/24qz5wotuh5hj.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/0j6nsovyxcqkz.js","/creators-assets/_next/static/immutable/chunks/3mwqlk6tp5l2t.js","/creators-assets/_next/static/immutable/chunks/2dvu3r_tb3ihz.js","/creators-assets/_next/static/immutable/chunks/1q7v4rdbqi_5d.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/1w_rozgc2dplq.js","/creators-assets/_next/static/immutable/chunks/0dglr8x18qkm5.js","/creators-assets/_next/static/immutable/chunks/0a8vglvd9phm3.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/2bbm33yuxi64a.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/0kjwwabuczr28.js","/creators-assets/_next/static/immutable/chunks/088oy6f_9ll4s.js","/creators-assets/_next/static/immutable/chunks/22zq93dcklbwz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0eljubaqaqluk.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3g7os-hf6q3tv.js","/creators-assets/_next/static/immutable/chunks/1e3mmtw6okz19.js","/creators-assets/_next/static/immutable/chunks/3fcb65_46-jt7.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/2x3imtac9af--.js","/creators-assets/_next/static/immutable/chunks/2t6l_zgbmmx8u.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0_ulklfcrp-s3.js","/creators-assets/_next/static/immutable/chunks/3-uff2nrv83hw.js","/creators-assets/_next/static/immutable/chunks/0alicgkopr9se.js","/creators-assets/_next/static/immutable/chunks/0-kepukl8ldjk.js","/creators-assets/_next/static/immutable/chunks/2-u6q7fsgfx0e.js"],"PostDetailCard"] 58:T953,

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

54:[["$","$L57",null,{"post":{"id":"0199e2d0-0fdd-7e1d-a8f5-d91f342294f5","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4f5ef748-1a24-49b2-974c-bccc452034ce","name":"BSS Digital Agency","slug":"bss-digital-agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/78933/avatar-RoOIzWIp9kkuQJ2B4O70quBtgCdeDH.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"ZokpANI729SW5zhiuAYS","resolved":true,"title":"Bio Overlay","body":"$58","bodyJson":null,"introduction":"","slug":"bio-overlay","author":{"framerUserId":"4f5ef748-1a24-49b2-974c-bccc452034ce","name":"BSS Digital Agency","slug":"bss-digital-agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/78933/avatar-RoOIzWIp9kkuQJ2B4O70quBtgCdeDH.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ZokpANI729SW5zhiuAYS/bio-overlay-5PX5SbM5rtGGpNK3xlmxle0aCocFtj","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-06T13:31:03.309Z","updatedAt":"2025-10-14T12:21:20.127Z","publishedAt":"2025-10-14T13:01:50.429Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://biooverlay.framer.website/","price":"15","paymentUrl":"https://buy.stripe.com/dRm3cxgfVd56eXd3sW5AQ03","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"3NwsLcHH5xj5eV22BTeF","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-14T13:01:50.429Z","updatedAt":"2025-10-14T13:01:50.429Z","reported":false,"type":"post"}}],"$L59"]

Suggested for you