---
title: "Pills Showcase — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Hoshine · Navigation. Elevate Your Product Storytelling The Pills Showcase component is a highly interactive, beautifully animated section designed…"
canonical: "https://framer.elliotli.dev/component/pills-showcase"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Pills Showcase

# Pills Showcase

Premium pill product features

[View on Framer](https://framer.com/marketplace/components/pills-showcase/?via=elliot-li)

![Pills Showcase preview image 1](https://framer.elliotli.dev/og/component/pills-showcase/87918ebce051de81/1600x1200.jpg)

## Summary

Elevate Your Product Storytelling The Pills Showcase component is a highly interactive, beautifully animated section designed to highlight your product's best features.

## Description

### Elevate Your Product Storytelling

The Pills Showcase component is a highly interactive, beautifully animated section designed to highlight your product's best features. Inspired by top-tier tech landing pages, it allows users to explore features, colors, and media seamlessly.

### Key Features

-   **Dual Design Modes:** Toggle between a sophisticated "Glass & Shadows" look or a clean "Flat Minimal" aesthetic directly from the properties panel.
    
-   **Scroll-Triggered Animations:** Pills elegantly stagger into view only when the component enters the user's viewport.
    
-   **Interactive Pills:** Click or tap to expand feature descriptions with buttery-smooth physics.
    
-   **Smart Media Syncing:** Automatically crossfades between images, looping videos, or solid colors based the active feature, utilizing advanced z-index stacking.
    
-   **Color Variants:** Built-in support for displaying product color swatches that sync directly with your media, complete with dynamic label text (e.g., "Shown in Emerald").
    
-   **Fully Responsive:** Custom mobile breakpoint logic ensures perfect swipe-navigation on phones and precise click-navigation on desktop.
    

### How to Use

1.  Paste the component onto your Framer canvas.
    
2.  Ensure the parent container has enough height (or is set to Fill/Fit).
    
3.  Use the right-hand Properties panel to add items under the "Pills" array.
    
4.  Choose between "Standard Text" or "Color Variants" for each pill to attach specific media or swatches.
    

### Demo

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-j0bj52t5-WGk6busyzrNMkX3XIQ564IlhSGO3A4)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-j0bj52t5-3tErRrl2QUGGeS64y0utklzm2qk0lm)

## Rank history [How rankings work →](/terms#rankings)

-   All · #8264

## Details

- **Author**: Hoshine
- **Price**: $15.00
- **Published**: 2026-04-02
- **Updated**: 2026-07-07
- **Added**: 2026-03-19
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation