FloatPill

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.