PlanComparison

A two-plan comparison card with a monthly or yearly billing switch, animated prices, plan selection and a "show differences only" filter.

When to use

• A pricing page that sells two paid tiers and needs to show what actually changes between them.
• When billing period changes the price and you want the number to tick rather than jump.
• Not for three or more plans side by side, or for comparing against competitors: use ComparisonTable.
• Not for a single upgrade prompt inside the app; use CtaSection (banner) or a Card.

Usage

import { PlanComparison } from "@/components/iris/blocks/plan-comparison/plan-comparison";

h(PlanComparison);

Props

PlanComparison takes no props. Its content is authored in the block source.

Content	Value in the source
Plans	Anasa Cloud (€4.99 a month or €39.99 a year) and Cloud Plus (€6.99 a month or €69.99 a year)
Features	8 rows: local app, AI credits each month, yearly price, and the credit cost of Smart Connections, chat, note and daily summaries and tag suggestions
Copy	"Add Anasa Cloud to your vault", billing notes, footer line about EUR pricing

To use your own plans, copy the block and edit the plans, features and pricing constants. Prices animate with two decimals.

Notes

• The matrix uses role="table", row, columnheader, rowheader and cell; prices are in a polite live region and the selected plan is announced.
• Select buttons are toggles with aria-pressed; a rail glides to the selected column.
• The layout responds to its own width (ResizeObserver, breakpoints at 720, 540 and 340 px), not the viewport: below 720 px the intro and footer stack and the padding tightens. Each value cell carries a visually hidden plan name for screen readers.
• Motion: prices count to the new value, rows open and close their height when filtering. Under reduced motion values swap instantly.
• Uses Button, SegmentedControl and Switch.