Pricing Comparison

Quick Start

Keep index.html beside assets/, or copy the complete <section class="pc-section" data-pricing-comparison>…</section> boundary into your page. Include the stylesheet, GSAP core and the section script once:

Code snippet omitted: it ships with the download.

No build step or animation plugin is required. The inline body-margin rule in the example head is preview-only; omit it in your host.

Using It With Your Own Design

Edit the title and intro, then each [data-pc-plan] article in index.html. The plan name is [data-pc-name]; descriptions, included limits and feature bullets are ordinary HTML. The two [data-pc-price] blocks contain the complete monthly and yearly offers. Keep the monthly equivalent and actual annual charge consistent; the section deliberately does not calculate or invent prices.

For example, change Draftroom to a website care service, rename Solo / Studio / Agency to Maintain / Improve / Partner, and replace the included project limits with support scope. Update both pricing blocks and the sample notes. Currency and tax wording are ordinary text, so you can specify your market accurately.

Brand controls are together on .pc-section in assets/style.css: --pc-ground, --pc-ink, --pc-muted, --pc-accent, --pc-accent-hover, --pc-on-accent, --pc-highlight, --pc-rule, font roles, --pc-width, --pc-gutter, --pc-space and --pc-radius. The font stack uses installed system faces and requires no remote font. Recheck contrast after colour changes. There are no content images to replace.

Add, remove or reorder whole [data-pc-plan] articles. Keep both price blocks and one choice disclosure in each. A single plan works; the script imposes no maximum. For many plans, consider splitting the comparison for readability. Grid columns follow available space and plans stack below the named 850px container breakpoint. Heading tags can change without changing selectors.

The .pc-price-group wrapper is important: the amount and billing charge change together. Keep the indicator inside .pc-switch so its measured position stays correct. No global CSS reset is required.

Behaviour and Options

Hook	Purpose
[data-pricing-comparison]	Independently mounted section root
data-motion-duration="0.32"	Transition duration in seconds; reduced motion is always instant
[data-pc-term="monthly/yearly"]	Native billing selection buttons
[data-pc-price="monthly/yearly"]	Complete price and charge for that term
[data-pc-choice]	Native fallback disclosure, enhanced to a plan dialog

Mount dynamically inserted content and revert only this instance:

Code snippet omitted: it ships with the download.

Initial markup mounts automatically. Calling mount on an already-mounted root first reverts that instance. Two roots operate independently. Remove a root only after calling its revert() method.

Connect your own signup

The sample buttons open a native dialog with the selected plan and charge. No account is created. For a real website, replace the entire choice disclosure with a normal link to the relevant signup route, or integrate your own flow using the event:

Code snippet omitted: it ships with the download.

To use a fully custom handler, remove the sample dialog and change the choice markup to actual links or buttons handled by your application. The billing comparison works without the dialog. Avoid leaving the sample handoff on a production checkout path.

Accessibility and Integration

Native billing buttons support keyboard and touch with visible focus and aria-pressed state. A polite status announces billing changes. The native dialog supports Escape, modal focus and return to the selected plan. Without JavaScript or GSAP, both prices are visible and the action is a native disclosure; no content is hidden behind inert controls.

Reduced-motion preferences apply immediately, including changes while mounted. Repeated choices settle on the latest request. There is no page entrance gate, scroll takeover, Lenis, fixed section height or pinning. The default main heading is h2, with h3 plan names; choose levels appropriate to your page. The section reflows in narrow host columns using a named container query. Long phone comparisons intentionally scroll in the host document.

Dependencies and Credits

• GSAP core, tested with 3.15.0; GSAP 3.12+ supports the required APIs. See the GSAP licence.
• Native dialog, ResizeObserver and CSS container queries in current browsers. Browsers without native dialog retain the plan disclosures.
• System fonts, no external photography or graphic assets.
• Draftroom, its packages and all prices are illustrative, not a real software offer. Replace sample commercial terms before publishing your own offer.