Squishy Sticker

Overview

Squishy Sticker is a premium, interactive component for Framer that brings a buttery-smooth, ultra-realistic peelable sticker effect to your website. Featuring a dynamic wind breeze animation and seamless opening/closing transitions, this component is perfect for portfolios, landing pages, galleries, or creative sections designed to showcase hidden surprises behind a sticker.

✨ Key Features

• 🖐️ Interactive Peel & Drag: Users can freely drag the corner of the sticker or simply click it to reveal and close with a physics-based spring animation.

• 🍃 Dynamic Wind Breeze: A natural idle wind effect that keeps your sticker feeling alive, with fully customizable intensity and speed controls.

• 🖼️ Dual Content Mode:

  • Image + Text: Displays a background image behind the sticker complete with a title, subtitle, interactive button, and a frosted glass (blur) overlay to ensure maximum text legibility.

  • Image Only: A clean gallery mode with no text, ideal for showcasing full photos or illustrations beneath the sticker.

• 🎨 Fully Customizable: Easily tweak corner radii, peel flap colors/shades, background colors, layer opacity, and blur levels.

• 🔠 Google Fonts Integration: Control your title font (Default: Fraunces Serif) and body/button font (Default: Plus Jakarta Sans) directly from the Framer property panel.

• 🔗 Framer Link Control: The CTA button is fully integrated with Framer's official Link control (supporting internal pages or external URLs) along with a "New Tab" toggle.

• ⚡ Zero Lag & SSG Ready: Technically optimized for Framer's Static Site Generation with zero visual glitches upon initial page load.