Spotlight Pricing

Spotlight Pricing

A gridded three-plan pricing section with a raised featured plan, blue light and bundled Geist typography. It includes monthly and annual prices, expandable benefit details and editable actions.

All plan names, prices, benefits and billing terms are customizable examples. They are not live Arclen UI offers. This component does not provide checkout or connect to a payment service.

React

Install through the catalogue, then import the installed component. Install the exact declared dependency @paper-design/shaders@0.0.40 and keep the local fonts and licence files together.

import { SpotlightPricing } from './components/spotlight-pricing';

export default function Plans() {
  return (
    <SpotlightPricing
      heading={'Make room for\nyour next idea.'}
      billing="annual"
      featured="studio"
      studioTitle="Team"
      studioMonthly={89}
      studioAnnual={72}
      studioUrl="/signup?plan=team"
      studioBenefits={[
        '15 active campaigns',
        'Shared workspaces | Invite colleagues to plan your campaigns together.',
        'Priority support',
      ]}
      decorativeMotion={false}
    />
  );
}

SpotlightPricing and Component are equivalent exports. Props accept every setting plus className, style and paused. Initial content renders on the server. The wrapper delegates interaction and cleanup to the portable core.

HTML

Download the HTML package and keep its files together. The supplied page includes the configured component. For an existing page, load the relative stylesheet and script and add a host:

<link rel="stylesheet" href="./component.css">
<div data-arclen-ui="spotlight-pricing"
     data-settings='{"billing":"annual","starterUrl":"/signup?plan=starter","studioUrl":"/signup?plan=studio","scaleUrl":"/contact"}'>
  <p>Plans start at $24 per month, billed annually.</p>
  <a href="/signup?plan=starter">View Starter</a>
</div>
<script src="./component.js" defer></script>

Serve the folder through a web server. Keep the relative paths when deploying below a nested URL. In the supplied full page, the no-JavaScript poster is a visual fallback. Static server HTML retains plan names, prices and destination links; billing changes and benefit disclosures require JavaScript. Add your own text fallback when using an empty host.

Portable controller

For a bundler with TypeScript, CSS and font imports:

import { mount } from './components/spotlight-pricing/src/core';
import './components/spotlight-pricing/src/styles.css';

const host = document.querySelector<HTMLElement>('#pricing');
if (!host) throw new Error('Missing pricing host');
const settings = { billing: 'monthly', lightColor: '#579dff', secondaryLightColor: '#579dff', secondaryBlend: 0 };
const pricing = mount(host, settings);
pricing.update({ ...settings, studioTitle: 'Team' });
pricing.pause();
pricing.resume();
// When removing this view:
pricing.destroy();

The core exports defaults, resolveSettings, render and mount. mount owns the host's children. update accepts a complete configuration: omitted values use defaults. A selected billing period survives updates to other settings. A changed billing setting explicitly selects that period. pause freezes the light and settles price effects while keeping all controls usable. resume allows motion only when visible and permitted. destroy removes listeners, observers, active animations and content; it is safe to call repeatedly.

Content and billing

Edit each plan's title, description, prices, benefits, action label and destination. Benefit entries use Label | Explanation to add a disclosure. Entries without a separator are plain benefits. Long text wraps. Newlines in the main heading become line breaks.

Spotlight places its summary and plan billing details below the plan grid. Prices are monthly amounts. For annual billing, the component displays the monthly amount and the annual charge, calculated as twelve times that amount. The discount label calculates the largest rounded saving among the three plans. Change the currency symbol to match your displayed prices; this does not perform currency conversion or process payments. Default action links use example.com and should be replaced with your own routes. Supported destinations are HTTP(S) URLs, root-relative paths and named fragment IDs. Script URLs and embedded credentials are rejected.

featured moves the badge and emphasis to a chosen plan, or disables them with none. featureRise applies to the desktop Spotlight layout. surface, ink and accent control the section colors. lightColor, secondaryLightColor and secondaryBlend control the Spotlight featured light and its static fallback. The default is blue light on a near-black surface with ivory text and blue highlights. Zero blend uses only the primary color; raise it to mix in a secondary light color. These controls preserve the field shape and motion. Updating only these three controls changes the existing renderer in place, retaining its phase, selected billing period and open benefit detail. surface also sets the shader background. maxWidth limits the section. inset controls desktop horizontal space; narrow layouts use their own fixed inset. Check contrast when changing colors.

The catalogue generates the complete settings table from the package manifest, including defaults, options and bounds.

Keyboard, touch and motion

Tab reaches both billing choices, the Spotlight billing switch, benefit disclosures and actions. Enter or Space selects billing or toggles a disclosure. Details also open on pointer hover or keyboard focus. Spotlight details float above the trigger; pointer exit keeps a focused detail open. Tap pins a detail until another action, an outside tap or Escape dismisses it. Focus remains on the trigger after Escape. The current period is announced through pressed button states, the Spotlight switch state and a polite price summary.

On its first entry into view, the Spotlight heading fades in character by character with a brief accent color, and its eyebrow decodes into the final label. The semantic text stays available throughout, and the entrance does not replay on scrolling back. Each Spotlight price briefly substitutes accented characters on its first entry into view and when billing changes, while keeping the amount and suffix in place. Billing input cancels any pending price entrances. Its scrambleDuration sets the duration; zero updates immediately. A stable accessible amount remains available throughout. Spotlight's featured plan has an animated WebGL2 lightfield with a static CSS fallback and diagonal texture. Its light formations are slightly taller, with softer fine detail and a brighter upper region that retains a transparent top edge. Its divided actions have a moving texture and reversible square-arrow and line-mask transitions. Reduced motion freezes decorative motion, settles detail transitions and updates prices immediately; decorativeMotion={false} freezes the light independently. Hidden documents, offscreen lightfields and paused controllers suspend the renderer. No external script or network service is required. Without WebGL2, the CSS fallback remains visible. Without IntersectionObserver, the light stays static. Without the Web Animations API, heading and benefit details appear immediately. Container queries stack plans at 800px of component width, so a narrow column works within a wide page.

Recognized software WebGL backends render the featured light at a lower resolution. Hardware and unrecognized backends retain the standard resolution limit. Palette, field settings and animation phase are unchanged; text, CSS lines and grain retain their original resolution.

Assets

The component uses the bundled Geist font under the SIL Open Font License 1.1, with its complete notice in assets. The lines, arrows, texture and static light fallback are drawn in CSS. The animated lightfield uses @paper-design/shaders@0.0.40, licensed under MIT by Lost Coast Labs, Inc. (Paper Design). Its full notice is included in assets/Paper-Shaders-LICENSE.txt.