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