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.
Kunal Sharma
