A single light follows the pointer across three plan cards, lighting their borders, inner surface and a dotted field in the gaps between them. When the pointer leaves, the light settles on a resting point.
Move across the plans. Every tier includes unlimited reviewers, so clients never need a seat.
Everything one designer needs to run client reviews.
Shared libraries and approvals for growing studios.
Security reviews, SSO and a contract that fits.
npx shadcn@latest add https://hyperblur.dev/r/pricing-spotlight-grid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pricing-spotlight-grid.tsx.
import { PricingSpotlightGrid } from "@/components/hyperblur/pricing-spotlight-grid"
<PricingSpotlightGrid accent="#a78bfa" radius={320} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Plans for every studio" | Pill above the title. Empty hides it. |
| title | string | "Pricing that grows with your client list" | Section heading. |
| subtitle | string | Paragraph under the heading. Empty hides it. | |
| tiers | { name: string; description: string; price: number | null; priceNote: string; features: string[]; cta: { label: string; href: string }; recommended?: boolean }[] | Basic, Team, Enterprise | Plans. A null price shows customLabel. |
| currency | string | "USD" | ISO 4217 currency code passed to Intl.NumberFormat. |
| locale | string | "en-US" | Locale used to format every amount. |
| customLabel | string | "Custom" | Shown instead of a price when price is null. |
| recommendedLabel | string | "Most teams pick this" | Chip on the recommended tier. Empty hides it. |
| radius | number | 280 | Radius of the light in pixels. |
| restPosition | { x: number; y: number } | null | { x: 0.5, y: 0.12 } | Where the light rests when the pointer is away, as fractions of the grid. null turns it off. |
| accent | string | "#7fb3ff" | Color of the light. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variables. |