63:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 64:T751,

✦ 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

✦ No code required after setup

62:["$","$L63",null,{"value":{"fallback":{"$inf$activity-creator-b15f5ab9-34a8-4b0c-926a-5574ddd3d6b3-all:/unified/creator/b15f5ab9-34a8-4b0c-926a-5574ddd3d6b3/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:b15f5ab9-34a8-4b0c-926a-5574ddd3d6b3:/unified/posts/?creator=b15f5ab9-34a8-4b0c-926a-5574ddd3d6b3&with=reposts":[{"data":[{"id":"019d9663-4c2d-7010-9e2b-fe1d760b8403","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"b15f5ab9-34a8-4b0c-926a-5574ddd3d6b3","name":"Harish P","slug":"harish-p","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"lu0INj3ed4ReSomxbMRM","resolved":true,"title":"AI Token Price Card","body":"$64","bodyJson":null,"introduction":"Rolling number animation on price change","slug":"ai-token-price-card","author":{"framerUserId":"b15f5ab9-34a8-4b0c-926a-5574ddd3d6b3","name":"Harish P","slug":"harish-p","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/lu0INj3ed4ReSomxbMRM/ai-token-price-card-bMtL0n1wyI4Xi11CE9lWtX4Y9MMD4s","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-13T11:26:53.019Z","updatedAt":"2026-06-15T11:40:46.601Z","publishedAt":"2026-04-16T13:03:03.213Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/AI-Token-Price-Card-msi5kj.js@FaDowCSsKR4YlIPviF4Z","previewUrl":"https://lavender-performance-076852.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"FaDowCSsKR4YlIPviF4Z","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-16T13:03:03.213Z","updatedAt":"2026-04-16T13:03:03.213Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L65"}]