About Beacon Pricing

Let the right plan shine brightest. Each plan is a totem of light: the active one burns at full intensity, earlier plans glow softly and later ones are almost dark. Change plans by click, drag, pinned scroll, arrows or keyboard while glow, height, scale, opacity and a subtle beam travel together. Row or Stage layouts, four CTA styles, your colours and fonts, vertical beacon cards on phones, accessible and reduced-motion aware.

Features

• Plans as light totems with lamp, halo, floor light and a subtle beam.

• Active, previous and next light states with continuous blending.

• Click, drag with snap and fling, pinned scroll, arrows and keyboard.

• Smooth, Snappy, Slow or Instant spring transitions.

• Row and Stage layouts with badges, features and CTAs.

• Solid, Outline, Glow and Link CTA styles.

• Light, beam, glow, inactive opacity and totem height controls.

• Vertical beacon cards on mobile.

• Screen-reader announcements and full keyboard support.

• One standalone React + TypeScript file.

• 22 controls in the Framer properties panel