EasecraftImplemented

Composition / Commerce

Animated Pricing Comparison

Compare stable plan cards while animated prices respond to monthly or annual billing.

07 / Flexible billingPlans that move with you.

No plan selected

Monthly billing selected.

Solo

For independent makers shipping focused work.

$12/mo

  • Included3 active projects
  • Included30-day history
  • Not includedTeam collaboration

Studio

Most popular

For teams building systems together.

$32/mo

  • IncludedUnlimited projects
  • IncludedUnlimited history
  • IncludedUp to 10 teammates

Scale

For organizations coordinating many teams.

$72/mo

  • IncludedUnlimited projects
  • IncludedAudit log and SSO
  • IncludedUnlimited teammates

Delivery contract

Install it

pnpm add easecraft@0.1.0

The composition imports stable APIs from easecraft.

Files / 02

  1. utilitycomponents/easecraft/compositions/animated-pricing-comparison-core.tsx
  2. compositioncomponents/easecraft/compositions/animated-pricing-comparison.tsx

Dependencies / 03

easecraft
npm / 0.1.0
react
peer / >=18.2.0 <20.0.0
react-dom
peer / >=18.2.0 <20.0.0

Component graph

Foundations

FeedbackNumber TickerNumberTicker

Interaction contract

Keyboard

Tab / Shift+Tab
Moves through billing-period controls and plan actions.
Enter / Space
Selects the focused billing period or pricing action.

Release requirement

Accessibility

Pattern
pricing-comparison
Focus management
Required
Reduced motion
Immediate semantic fallback
Note
Uses native pressed buttons for billing periods and labelled articles for each plan.
Note
Announces the selected billing period once while NumberTicker keeps each final price stable for assistive technology.