Peelable Sticker

Peelable Sticker is a playful, interactive component that simulates the tactile experience of peeling off a sticker. By combining Framer’s native drag functionality with a visual “peel” behavior, this component adds a layer of realism and fun to your interfaces. It’s ideal for interactions that invite exploration, discovery, or reward.

Use Cases

1. Promo Elements – Peel to reveal discounts, codes, or special offers

2. Gamified Interfaces – Interactive challenges or hidden content

3. Onboarding Flows – Highlight key features or steps through playful discovery

4. Call to Action – Drive attention with a peel-to-click experience

5. Interactive Stickers – Add personality and motion to static designs

Customization

• Sticker Content – Add any image to the component and make it a sticker

• Rotation – Set the initial rotation angle for a playful, natural feel

• Padding – Add spacing around the sticker for layout control

• Peel Hover – Adjust how much the sticker lifts on hover (0–1)

• Peel Active – Define how much the sticker peels when being dragged (0–1)

• Shadow Opacity – Control the intensity of the shadow for added depth

• Drag Direction – Customize it through Framer's built in 'Effects > Drag'

• Snap Back – Option to return sticker to original position after drag. Customize it through Framer's built in 'Effects > Drag'