Tradeoff Scatter Pricing Block for React

Edit PLANS at the top of the file. A plan's price sets its place along the price axis, and its height comes from the cost per 1,000 viewing hours, worked out as price / (hours / 1000), so change hours and the bubble moves. size is the bubble's width in pixels for its storage, label puts its name beside the bubble ("end") or above it ("above"), and from marks a plan whose price is a starting point, like Enterprise. The rest is the right cell's content: name, tagline, features, cta, href and popular, which draws the ring and the Most popular badge.

No, they're fixed so the chart doesn't jump between plans: X_MIN and X_MAX set the price range (logarithmic, so $15 and $400 both have room), Y_MAX the top of the cost axis, and X_TICKS and Y_TICKS the gridlines and their labels. If your prices run higher or your cost per unit is not between $0 and $9, change them, and keep every bubble inside the range. In right-to-left layouts the chart mirrors: price grows towards the left and the cost axis moves to the right.

The bubbles are a radio group named "Plan": Tab reaches the selected bubble, which shows a focus ring, and the arrow keys move to the next plan and select it. Each bubble is read with its name, price, cost per 1,000 hours and storage, as in "Pro, $45 per month, $4.50 per 1,000 viewing hours, 1 TB of storage". The gridlines, tick labels and axis titles are hidden from screen readers, since every bubble already says its own numbers. Selecting a plan doesn't announce the cell's new content; the selected radio already says which plan it is.

The cell's button is a real link to the selected plan's href. It's a ShineButton with render set to an a element and nativeButton={false}. Point the paid plans at your trial or checkout route with the plan in the URL, and Enterprise's Talk to sales at your sales form.

The chart is HTML positioned by percentages, not a scaled image, so its text keeps its size: the tick labels, axis titles and bubble names stay at 12 pixels while the plot narrows. The bubbles shrink to 70% of their size below the sm breakpoint, and each bubble's name and price count as part of it, so the smallest plan is easy to tap. The plan cell stacks under the chart, with the price and button first and the features after.

Use the scatter when the tradeoff between price and what you get is the main argument, and you want visitors to see that bigger plans cost less per unit. It works for three to five plans; more crowd the chart. When buyers need to check many individual features across plans, a comparison table such as Tiered API Pricing serves them better.