5e:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/415hvdruki4ud.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1ktf0sm5sxqup.js","/creators-assets/_next/static/immutable/chunks/1dzfckym0nghc.js","/creators-assets/_next/static/immutable/chunks/1vr_3-vdcf0mn.js","/creators-assets/_next/static/immutable/chunks/1cuuzi60s_xh3.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1gop2naj8q_bx.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/2k_aekaeyljm2.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0mxxs4-__ynew.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/43klns5g0wl80.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3q5d1avmchlp0.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/149w-u4or12up.js","/creators-assets/_next/static/immutable/chunks/1kws7r6etoq5-.js","/creators-assets/_next/static/immutable/chunks/13mks9ztnefhj.js","/creators-assets/_next/static/immutable/chunks/17pioewhhzr_j.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2p4sqhvmasp9s.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/3lqyfto2688hr.js","/creators-assets/_next/static/immutable/chunks/3fr1ev83fgwky.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/3um5ae_udgvki.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2zlizmh1083ez.js"],"PostDetailCard"] 5f:T7b8,

FloatPill is a premium Framer component that transforms your site navigation into something truly agency-level. A minimal floating pill sits at the bottom of your page — click any icon and a frosted glass popover card rises above it, showing your page name, subtext, description, and a custom thumbnail.

Everything adapts automatically between dark and light mode. One toggle pill and card both switch together.

What makes it different: Zero color flash when images load. Silky smooth spring animations. Works perfectly on desktop, tablet, and mobile. Canvas-safe — no black boxes in the Framer editor.

Features:

100+ built-in icons across Navigation, Social, Business, Media, Actions, and Design Tools

Dark & Light mode — pill and frosted card switch together with one toggle

Click or Hover trigger mode

2 to 5 icon slots — unused slots auto-hide from the property panel

Per icon: custom heading, subtext, description, emoji, thumbnail color, thumbnail image, and native Framer page/URL link

Native Framer Font Picker — connects to your project's text styles

Card Radius & Thumbnail Radius sliders for full shape control

Title Color & Body Color pickers

Mobile responsive — popover always centered, never overflows on any screen size

Image-first thumbnail — if you upload a photo, color and emoji are completely hidden. Zero flash, zero bleed

Spring physics animations — open, close, and switch feel instant and premium

Canvas safe — works correctly in Framer's editor and live preview

Included: 1 FloatPill code component — drop it on any page, set to fixed position, bottom center. Done.

Ideal for: Personal portfolios, creative studios, agency sites, SaaS landing pages, any site that wants to feel premium without cluttering the layout with a traditional navbar.

5b:[["$","$L5e",null,{"post":{"id":"019d90b0-efa6-70d1-8c25-8add518be897","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"8ae098cd-ff07-4cd8-b548-757f4e8f7083","name":"Kunal Sharma","slug":"kunalshawarmaa","avatar":"https://framerusercontent.com/avatars/users/8ae098cd-ff07-4cd8-b548-757f4e8f7083/XPu-y0JKT","followed":false,"followsYou":false},"media":[],"resources":[{"id":"KLZU3znMUMK61Ws2lN0F","resolved":true,"title":"FloatPill","body":"$5f","bodyJson":null,"introduction":"A frosted glass pill bar","slug":"floatpill","author":{"framerUserId":"8ae098cd-ff07-4cd8-b548-757f4e8f7083","name":"Kunal Sharma","slug":"kunalshawarmaa","avatar":"https://framerusercontent.com/avatars/users/8ae098cd-ff07-4cd8-b548-757f4e8f7083/XPu-y0JKT","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/KLZU3znMUMK61Ws2lN0F/floatpill-wxqMrrNKgyqjdZqbQ5R70y07iXy3JN","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-07T17:29:48.413Z","updatedAt":"2026-04-16T06:24:25.284Z","publishedAt":"2026-04-15T10:30:08.038Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Floatpill-SikDnP.js@Ql36qh7jIN09qc48JF7Z","previewUrl":"https://floatpill.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"Ql36qh7jIN09qc48JF7Z","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":13,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-15T10:30:08.038Z","updatedAt":"2026-04-15T10:30:08.038Z","reported":false}}],"$L60"]

Suggested for you