A 3x3 feature grid where the hovered or focused tile lifts under a pointer-following glow while the others dim and blur, each tile with its own animated icon.
NewPlatform
Security, speed and the boring-but-vital parts handled for you. Hover any tile to take a closer look.
Every request is verified, scoped and logged, from the office or a café.
Hot paths run close to users, so pages feel instant on any connection.
Deploy once and serve from the nearest city with automatic failover.
SAML, OIDC and passkeys out of the box, with SCIM provisioning.
Funnels, retention and revenue without a single extra script tag.
Smart thresholds learn your traffic and only page you for real issues.
Chain triggers, approvals and webhooks with a visual builder.
Point-in-time restore for content, config and data, for 90 days.
Typo-tolerant full-text search across every record you store.
npx shadcn@latest add https://hyperblur.dev/r/bento-spotlight.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bento-spotlight.tsx.
import { BentoSpotlight } from "@/components/hyperblur/bento-spotlight"
<BentoSpotlight accent="#2f7bff" onItemSelect={(item) => console.log(item.title)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Platform" | Text in the pill above the title. |
| title | string | "Nine reasons teams switch in a week" | Section heading. |
| subtitle | string | "Security, speed and the boring-but-vital parts..." | Supporting paragraph under the title. |
| items | { title: string; description: string; href: string }[] | 9 features | Tiles in order. Icons are assigned by position: shield, bolt, globe, lock, bars, bell, gear, layers and search. |
| onItemSelect | (item: { title: string; description: string; href: string }, index: number) => void | Called when a tile is clicked. | |
| accent | string | "#2f7bff" | Color of the glow, focus ring and active icon. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |