127+ Primitives
Dot Text Hero
TextInteractive headline hero featuring HTML5 canvas text rasterization into hexagonal-packed dots with cursor repulsion, spring-back physics, and twinkling.
Interactive CanvasHooke's LawA11y ReadyHigh DPI
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/dot-text-hero.json"
Props
TypeScript props supported by <DotTextHero />.
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | string[] | ["Cosign", "Awards"] | Array of headline text lines rasterized into the interactive dot matrix. |
| colors | string[] | ["#ffffff", "#e5e5e5", "#bdbdbd", "#8a8a8a", "#5c5c5c"] | Color palette randomly assigned to dots and cycled during twinkling. |
| dotSize | number | 14 | Maximum dot diameter in CSS pixels, automatically clamped for small screens. |
| repelRadius | number | 80 | Cursor proximity radius in pixels where repulsion physics begins. |
| repelStrength | number | 5 | Peak repulsion velocity force applied to dots near the cursor. |
| springStiffness | number | 0.08 | Hooke's Law spring return factor restoring dots to their home anchors. |
| damping | number | 0.82 | Velocity friction damping coefficient preventing endless oscillation. |
| twinkleInterval | number | 80 | Interval in milliseconds between random dot re-colorings. 0 disables twinkling. |
| brandName | string | "cosign" | Brand title rendered in the top navigation bar. |
| badgeText | ReactNode | "Cosigning is open" | Status badge text displayed with an optional glowing pulse indicator. |
| description | ReactNode | ... | Supporting descriptive text rendered beneath the dot matrix headline. |
| primaryCta | DotTextHeroCta | { label: "Nominate someone", href: "#nominate" } | Primary action button configuration with label, href, or onClick handler. |
| secondaryCta | DotTextHeroCta | { label: "Cosign now", href: "#cosign" } | Secondary outline button configuration with label, href, or onClick handler. |
| showNav | boolean | true | Whether to render the top navigation bar with brand, links, and action button. |
Key Features
- Offscreen canvas text rasterization dynamically packed into high-density hexagonal dot fields.
- Real-time inverse-square mouse repulsion with Hooke's Law spring restoration and velocity damping.
- Staggered entrance delays and subtle twinkle color cycling for a living, breathing headline.
- Dual-mode API: use as a complete turnkey hero section or embed the standalone DotTextCanvas anywhere.
Keyboard & Accessibility
- Provides hidden semantic h1 heading with the full text content for screen readers while marking the canvas aria-hidden.
- Fully respects prefers-reduced-motion by bypassing entrance delays and disabling physics repulsion and twinkling.
- Includes keyboard-navigable links and semantic button actions with clear focus indicators.