Pricing Table Reveal

Build a pricing section with three tiers and a billing toggle. Toggle: a pill with "Monthly" and "Yearly" options. The selected option carries a dark pill background that slides between them as one shared element (Framer Motion layoutId or equivalent) with a spring (stiffness ~460, damping ~34). When Yearly is selected, a small accent "-20%" badge springs onto the pill's top-right corner (scale from 0 with slight rotation, stiffness ~520). The pill slides and the badge springs on purpose: one is a continuous move between two places, the other is an event. Tiers: three cards side by side; the plan names are listed at the end. The middle one is the star: accent border, soft shadow, floating ~4px higher, and a small monospace badge overlapping its top edge (its wording is listed at the end). Let that badge sit on the border rather than inside the padding, so it reads as a label applied to the card instead of one more line of content. Others get hairline borders. Each card: plan name, price, 2-3 perks with small green checks. Prices: the monthly prices are listed at the end. Derive each yearly price from its own monthly price, less the discount the badge advertises, and round it. Never store a second column of typed yearly numbers, because the two drift apart the first time anyone edits a price. Price change: when the toggle flips, every price rolls vertically - the old number slides up and out while the new slides in from below (16px travel, spring stiffness ~420, damping ~30). Use tabular numbers so a 1 and a 7 take the same width and nothing beside the price jumps mid-roll. Accessibility: toggle options use aria-pressed; the price roll respects prefers-reduced-motion (instant swap). Colors as tokens: paper cards, ink text, one accent, green only for the perk checks. Keep the section centered with generous spacing - it should read as a finished landing-page block. Make it mine: - Name the first tier "Starter". - Price the first tier at $8 per month. - Name the second tier "Pro". This is the middle card, the one that carries the badge. - Price the second tier at $19 per month. - Name the third tier "Team". - Price the third tier at $65 per month. - Set the middle card's badge to read "POPULAR". Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.