Resources

Detail Pill Interaction in Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Detail Pill Interaction in Framer

View demo

Copy component

Remix project

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

How to make your first $1,000 with Framer

Free training

How to make your first $1,000 with Framer

Free training

Component

Detail Pill Interaction in Framer

This is a detail pill component I recreated in Framer, based on a concept by Jakub. This fun interaction is ideal for embedding brief, hidden details in a clean, compact style, enhancing user experience with interactive content. Just copy, paste, and customize this small fun interaction in your Framer projects.

image of Nandi Muzsik
image of Prianca S.
profile image of Jakub Krehel

Created by

Nandi

,

Prianca

,

and

Jakub

Connect button with 248k active users indicator

About the resource

To create a Detail Pill interaction in Framer, begin by setting up an extended variant of the component and wrapping the extra text in a container. Then, create a scaled-down variant with a slight blur and change its position to absolute with hidden overflow.

The key is to animate only the text within the wrapped container. Finally, place the text wrap and set its opacity to zero initially for a smooth reveal effect. This sequence helps create the interactive transition effect. Also, make sure to trigger the interaction on click specifically from info tag inside the pill and not the whole element.

About the resource

To create a Detail Pill interaction in Framer, begin by setting up an extended variant of the component and wrapping the extra text in a container. Then, create a scaled-down variant with a slight blur and change its position to absolute with hidden overflow.

The key is to animate only the text within the wrapped container. Finally, place the text wrap and set its opacity to zero initially for a smooth reveal effect. This sequence helps create the interactive transition effect. Also, make sure to trigger the interaction on click specifically from info tag inside the pill and not the whole element.

About the resource

To create a Detail Pill interaction in Framer, begin by setting up an extended variant of the component and wrapping the extra text in a container. Then, create a scaled-down variant with a slight blur and change its position to absolute with hidden overflow.

The key is to animate only the text within the wrapped container. Finally, place the text wrap and set its opacity to zero initially for a smooth reveal effect. This sequence helps create the interactive transition effect. Also, make sure to trigger the interaction on click specifically from info tag inside the pill and not the whole element.

Two Connect button styles with Info option

The two variants fo the component.

Two Connect button styles with Info option

The two variants fo the component.

Two Connect button styles with Info option

The two variants fo the component.

Learn to make your first $1,000 with Framer from zero.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Free training

Nandi portrait's background

Learn to make your first $1,000 with Framer from zero.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Free training

Nandi portrait's background

Learn to make your first $1,000 with Framer from zero.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Free training

Nandi portrait's background

More resources

More resources

View all

  • Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

    Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

  • Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component

    Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component