127 Components
Hover Reveal Feature Grid
CardsLinear-inspired bento feature grid where hovering any tile casts an interactive radial spotlight mask across card borders, smoothly reveals secondary deep feature specifications, and highlights contextual interactive badges.
Linear Bento Feature Grid
Linear IndigoHover tiles to project spotlight mask & reveal secondary specs
CORE PROTOCOL< 8ms Latency
Real-time Bi-directional Graph Sync
Instantaneous CRDT delta updates replicated across client memory states.
Hover or focus to inspect spec→
99.999% UptimeSTATUS: READY
INFRASTRUCTURE0.2ms Init
Microsecond Sandboxing
Stateless execution isolates boots in 200 microseconds.
Hover or focus to inspect spec→
0 Cold StartSTATUS: READY
ERGONOMICS120+ Hotkeys
Command-Driven Workflows
Operate the entire system without lifting fingers from the keyboard.
Hover or focus to inspect spec→
100% KeyboardSTATUS: READY
OBSERVABILITY10M Events/s
High-Frequency Telemetry Mesh
Sub-millisecond tracing across microservices with eBPF hooks.
Hover or focus to inspect spec→
Auto DiagnosticsSTATUS: READY
SPOTLIGHT CONE350px
HOVERED: NONETILES: 4 BENTO CELLS
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/hover-reveal-feature-grid.json"
Props
TypeScript props supported by <HoverRevealFeatureGrid />.
| Prop | Type | Default | Description |
|---|---|---|---|
| spotlightColor | "indigo" | "emerald" | "violet" | "amber" | "indigo" | Color hue of the radial spotlight cursor mask. |
| spotlightRadius | number | 350 | Radius in pixels of the illuminated spotlight cone. |
| className | string | — | Optional custom classes applied to the root container. |
Key Features
- Continuous mouse-tracking radial spotlight mask illuminating adjacent borders across the grid mesh.
- Spring-animated progressive reveal: hover expands secondary architecture metrics and interactive badges.
- Responsive asymmetric Bento layout with hero feature anchor and companion cards.
- Customizable spotlight colors: Linear Indigo, Emerald Matrix, Cyber Violet, and Sunset Amber.
- Interactive radius slider and spotlight intensity controls in the live demo stage.
Keyboard & Accessibility
- Hidden content is conditionally announced to screen readers or made accessible via keyboard focus.
- Each bento tile is keyboard focusable with high contrast focus indicators.
- Supports prefers-reduced-motion by disabling spotlight translation and instant-showing specs on focus.