184 Components
Hover Cursor Shimmer Text
TextText typography that shimmers strictly at the cursor's hover position using a hardware-accelerated dynamic radial mask beam.
npx boseui add magnetic-button
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:clsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/hover-cursor-shimmer-text.json"
Props
TypeScript props supported by <HoverCursorShimmerText />.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Text content to render with cursor-guided shimmer. |
| radius | number | 100 | Diameter radius in pixels of the active shimmer beam. |
| shimmerColor | string | "#ffffff" | Illuminated highlight color. |
| glowColor | string | "rgba(255, 255, 255, 0.45)" | Ambient specular glow color around the cursor. |
| as | "span" | "h1" | "h2" | "h3" | "h4" | "p" | "div" | "span" | Semantic HTML element type. |
Key Features
- Illuminates only the specific portion of the sentence or headline being hovered.
- Hardware-accelerated CSS radial gradient mask tracking relative pointer coordinates.
- High-specular text shadow glow that follows mouse movements in real time.
- Dual-layer structure preserving base typography contrast and screen-reader accessibility.
Keyboard & Accessibility
- Base text retains standard readable contrast in light and dark mode.
- The shimmer overlay is hidden from screen readers via aria-hidden='true' to avoid duplicate pronunciation.