Glass Pricing Tabs

Glass Pricing Tabs puts your plans behind a billing switch: press Monthly or Yearly and every figure counts up to its new number, with a save badge on the term that earns it.

Glass Pricing Tabs puts your plans behind a billing switch: press Monthly or Yearly and every figure counts up to its new number, with a save badge on the term that earns it. Each plan sits on a frosted card with a blurred backdrop, a hairline edge and a highlight sheen, and the plan you feature keeps an accent border and a label you write. The tabs answer the arrow keys and read as a real tab list, the section lands complete on the Framer canvas at the first frame, and reduced motion gets the new figures at once. Key features - **Two or three billing tabs.** Label each term, add a suffix like /mo, and a save badge where it belongs. - **Prices that count up.** A tab press rolls every figure to its new number in pure CSS. - **Frosted plan cards.** A blurred backdrop, a hairline edge and a highlight sheen, blur set in pixels. - **One plan out front.** Mark a plan featured for an accent border and a label you write. - **Everything on the card.** Name, description, a price per tab, up to six features and a button with its own link. - **Keyboard tabs.** Arrow keys, Home and End move between terms, announced as a real tab list. - **Columns you set.** Auto, two, three or four across, and a single column on a phone. - **Styled by you.** Five colours, radius, gap, text size, max width, alignment and every label. What you control • Tabs as an array: label, price suffix and a save badge for the longer term • Plans as an array: name, description, a price per tab, features one per line, button label, link and a featured flag • Columns, card gap, radius, max width, alignment, text size and glass blur • Five colours, count-up length, the save badge, the featured label and the accessibility labels One pricing section per page, up to four plans and three billing tabs, with a backdrop glow you can switch off when the section sits on your own gradient.

Billing toggle with plan cards