---
title: "AI Token Price Card — Free Framer component · Best of Framer"
description: "Free Framer component · by Harish P · Cards. Rolling number animation on price change"
canonical: "https://framer.elliotli.dev/component/ai-token-price-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/AI Token Price Card

# AI Token Price Card

Rolling number animation on price change

[View on Framer](https://framer.com/marketplace/components/ai-token-price-card/?via=elliot-li)

![AI Token Price Card preview image 1](https://framer.elliotli.dev/og/component/ai-token-price-card/054ff9d1a02cac5e/1600x1200.jpg)

## Summary

Rolling number animation on price change

## Description

✦ What makes this different

Most pricing cards are static. This one animates. When a user selects a new plan, the price rolls up or down with a smooth digit-by-digit animation exactly like Manus, Linear, and top AI SaaS products.

✦ Features

✅ Rolling number animation on price change

✅ Scrollable dropdown with custom scrollbar

✅ Feature text updates automatically with selection

✅ Tooltip updates dynamically per plan

✅ All plans editable from the Properties panel

✅ Add or remove plans without touching code

✅ Works perfectly on published Framer sites

✅ Zero dependencies — pure Framer + Framer Motion

✦ How it works

1\. Drop the component onto your canvas

2\. Click it and open the Plans panel on the right

3\. Add your credits and prices

4\. Done! Everything updates automatically

✦ Who is this for

→ SaaS founders building AI token pricing pages

→ Framer designers who want premium interactions

→ Agencies delivering client pricing pages fast

→ Anyone building a usage-based pricing UI

✦ What's included

→ Pricing Card component

→ Scrollable Dropdown component

→ Animated price override

→ Dynamic credits text override

→ Dynamic tooltip override

→ Shared state bridge (works on published sites)

✦ Refund Policy

Due to the digital nature of this product, all sales are final. However, if you experience a technical issue with the component, contact me within 7 days of purchase and I will do my best to resolve it or issue a refund at my discretion.

Contact: [**harishp.design@gmail.com**](mailto:harishp.design@gmail.com)

✦ No code required after setup

## Rank history [How rankings work →](/terms#rankings)

-   All · #5955

## Details

- **Author**: Harish P
- **Published**: 2026-04-16
- **Updated**: 2026-06-15
- **Added**: 2026-04-13
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards