Ticket Card

About this template

Ticket Card : swaying pricing tickets with tear-off interaction

A playful, physics-based pricing component. Cards hang from a string, gently sway on load, and tear off when clicked. Built to make pricing tables, plan comparisons, and feature highlights feel tactile instead of flat.

What Makes It Stand Out

Suspended ticket cards that gently sway on load for a tactile, physical feel.

Satisfying tear-off interaction when a card is clicked.

Auto-adjusting title that scales to fit any label length.

Mobile-first design that adapts effortlessly to all screen sizes.

Flexible enough for pricing plans, service offers, or feature highlights.

Customizations

Fine-tune the tickets to match your brand and project needs:

Add unlimited cards with independent content per ticket.

Set your accent color to theme the whole component in one control.

Edit title, price, feature list, and button label per card.

Toggle the tear-off interaction on or off.

Adjust sway intensity and animation speed.

Control string length, ticket width, and corner style.

Customize fonts, active/inactive text colors, and button colors.

Control placeholder line color and background fill.

And much more.. (Watch the demo video)

Usage

Getting started is simple:

Copy & paste the component into your canvas.

Resize it as needed.

Add your cards to the Card Data property, including title and price for each.

For each card, set the feature list and button label.

Pick an accent color for the card.

Repeat to create as many tickets as you like.

Transactions can be done in USD/EUR/GBP

After completing your purchase, you will receive a link to the component. Copy the URL and paste it into your Framer project to import it.