Haze Tier Card

Written for the variant you picked above: Lavender

Build a single pricing-tier card (React + CSS, no libraries): a dark card about 400px wide whose edges glow with a soft, smoky haze, leaving the middle dark for the content. Shell: 16px radius, background #050507, a 1px ring of the highlight colour at 22% and a soft drop glow underneath. Haze layer (behind the content, clipped to the radius): seven blurred radial puffs of the glow colour hugging the edges (a big one over the top-left corner, one along the rest of the top, tall ones down the left and right sides, one along the bottom and one in the bottom-right corner), each blurred 18px and drifting on its own 16–23s alternate loop (±3% translate, 0.96–1.06 scale). Over them, a rounded rectangle of the card colour inset 9% and blurred 22px punches a dark hole, so the light only lives along the border and reads as patchy mist. Edge layer: an inset 1px ring, an inset 24px glow, a 1px highlight line along the top from 8% to 70% with a soft bloom, and a shorter highlight into the bottom-right corner. A fine pointer leans the whole haze up to 9px toward it, eased over 0.9s. Content, centred: the tier name (1.8rem, 400, pale grey-violet), the price as a raised currency sign (1.8rem), a big amount (3.6rem, 500, tight tracking, tabular figures, cents set smaller) and "/mo" on the baseline, then a muted line "Billed yearly or $24 billed monthly". Then a left-aligned list of features with 0.75rem gaps: each has a filled grey check circle (15px) and the label; some end in a small outline "i" button. Hovering, focusing or clicking it shows a dark tooltip above it (role="tooltip", linked with aria-describedby while open), and Escape closes it. Last, a full-width 2.4rem button with a 100° gradient between two accent tones, a 1px inner top highlight and 4px radius; on hover it lifts 1px, brightens and casts a coloured glow. Copy is yours: a tier called Studio at $18/mo, eleven features. Reduced motion stops the drift and transitions. Props: name, price, monthly, currency, features [{label, info?}], cta, href, tone {glow, hi, from, to, ink}. Selected variant — Lavender (lavender): Tone {glow #7a6fc4, hi #c3b8f5, button #957cf0 → #6b4fd6, ink #ece8fb}: lavender haze with a violet button. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Hover, focus or tap an info button to read its tooltip; Escape or moving away closes it. A fine pointer pulls the edge haze toward it. The button lifts and glows on hover. Motion: Haze puffs drift on 16–23s alternate loops; the pointer lean eases over 0.9s; tooltips fade and rise 4px in 0.16–0.2s; the button lifts 1px in 0.25s. Accessibility: An article labelled with the plan name and a real heading. Info buttons are labelled 'About …', expose aria-expanded and point at their tooltip with aria-describedby while it is open; Escape closes it. Text contrast on the dark middle is above 7:1 for the list and price. Reduced motion stops the drift. Responsive behavior: Fills up to 25rem; under 420px the padding and list text tighten so long labels still fit on one or two lines. Touch: Tap an info button to open its tooltip and tap elsewhere to close it; the haze drifts on its own without the pointer lean. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Hover, focus or tap an info button to read its tooltip; Escape or moving away closes it. A fine pointer pulls the edge haze toward it. The button lifts and glows on hover.

Motion

Haze puffs drift on 16–23s alternate loops; the pointer lean eases over 0.9s; tooltips fade and rise 4px in 0.16–0.2s; the button lifts 1px in 0.25s.

Accessibility

An article labelled with the plan name and a real heading. Info buttons are labelled 'About …', expose aria-expanded and point at their tooltip with aria-describedby while it is open; Escape closes it. Text contrast on the dark middle is above 7:1 for the list and price. Reduced motion stops the drift.

Responsive

Fills up to 25rem; under 420px the padding and list text tighten so long labels still fit on one or two lines.

On touch

Tap an info button to open its tooltip and tap elsewhere to close it; the haze drifts on its own without the pointer lean.