A list of oversized feature names. Hovering or focusing a row slides a floating demo card level with it on a spring and wipes in a live mini demo for that feature.
Platform
npx shadcn@latest add https://hyperblur.dev/r/features-hover-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/features-hover-reveal.tsx.
import { FeaturesHoverReveal } from "@/components/hyperblur/features-hover-reveal"
<FeaturesHoverReveal accent="#ff6b4a" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Platform" | Mono label above the title. |
| title | string | "Built for teams who cannot afford to lose a word" | Section heading. |
| items | { title: string; caption: string; detail: string }[] | 5 features | Rows. Row n uses demo n (sync, offline, audit, roles, webhooks). |
| cta | { label: string; href: string } | null | { label: "Read the architecture notes", href: "#" } | Outlined link beside the heading. |
| accent | string | "#ff6b4a" | Accent for numbers, underline and demos. |
| defaultIndex | number | 0 | Row shown first. |
| onItemFocus | (index: number) => void | Called when a different row becomes active. | |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |