---
id: "2113137522637185418"
source: https://x.com/AshikArtistry/status/2113137522637185418
author: "Ashik (@AshikArtistry)"
media: "video, 1920x1080, 15.7s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Peel-Off Price Sticker Pricing

## Summary
A three-plan pricing section styled like shelf price tags, where the featured plan's monthly price is a gold foil sticker you can peel back to reveal the cheaper yearly price on a holographic silver label underneath. The billing toggle, handwritten hints and barcode footers turn a standard pricing table into a small, memorable interaction.

## Style
- Theme: light
- Mood: playful, clever, crisp, commercial
- Tags: pricing, peel-sticker, foil, holographic, billing-toggle, price-tag, barcode
- Category: Pricing

## Palette
| Role | Hex |
|---|---|
| Page | #F1F2F6 |
| Card | #F9FAFC |
| Line | #E6E7EC |
| Muted | #999AAC |
| Ink | #14161C |
| Featured blue | #425DC6 |
| Deep blue | #2F45B8 |
| Gold foil | #E2A93B |
| Holo silver | #D8DCE6 |

## Typography
- Section heading: bold grotesk, about 2.6% of frame width. Inter (700).
- Plan names: medium sans; prices: large bold numerals with a small "/mo" and grey note. Inter (500 / 700).
- Feature list: small regular sans with check icons. Inter (400).
- Card codes ("AIS-03 / GROWING"): tiny monospaced caps. JetBrains Mono (500).
- Annotations ("peel for yearly", "2 months free"): blue handwritten script with arrows. Caveat (600).

## Layout
- 16:9 frame (1920x1080); heading and subline top left, Monthly / Yearly toggle top right.
- Three equal cards (about 28% of the width each) in a row, the middle one blue.
- Each card: name and tagline, price block, billing note, full-width button, a ticket notch line, checklist, code and barcode footer.

## Elements
- Cards: 16px radius, side notches (small half-circles) where a dashed tear line crosses, soft shadow.
- Featured card: blue gradient, white text, white button with blue text, a small "Most shops pick this" pill.
- Gold sticker: rounded rectangle with metallic gradient, slight tilt, curled shadow; label "MONTHLY".
- Holographic label underneath: iridescent silver with "YEARLY", the yearly price and a dark "SAVE" tag.
- Barcodes and plan codes at the bottom of every card.

## Motion
- Dragging the gold sticker peels it from one corner, showing its curled back and the silver label beneath; releasing snaps it back.
- Switching the toggle to Yearly peels the sticker away automatically and updates the other two prices (number roll, about 300ms).
- The toggle thumb slides with a spring.

## Rebuild it
1. Layout: `grid grid-cols-3 gap-4` cards on `#F1F2F6`; notches with radial-gradient masks at the tear line.
2. Price sticker: two stacked layers; the top gold layer uses a `clip-path` polygon that recedes from a corner while a rotated copy (the curl) shows its back with a darker gradient.
3. Drive the peel amount from pointer drag distance (0 to 1) and animate to 1 when Yearly is selected.
4. Holographic label: `conic-gradient` of pastel hues blended over silver, with a slow hue shift.
5. Animate price changes with a rolling number component; use placeholder product and plan names.

## Generation prompt
A playful SaaS pricing section styled like shop price tags: three rounded cards on a cool light grey background, the middle one bright blue with a gold foil price sticker being peeled back to reveal a holographic silver yearly price label underneath, a Monthly / Yearly toggle with a handwritten "2 months free" note, checklists, ticket notches and small barcodes at the bottom of each card; crisp, clever, commercial, no real brands.