A dark footer that ends in a huge outlined wordmark whose letters stretch upward and fill with color as the pointer passes over them, with a light pool following the cursor. At rest the letters breathe in a slow wave.
npx shadcn@latest add https://hyperblur.dev/r/footer-pointer-wordmark.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/footer-pointer-wordmark.tsx.
import { FooterPointerWordmark } from "@/components/hyperblur/footer-pointer-wordmark"
<FooterPointerWordmark wordmark="Northwind" accent="#22d3ee" />| Prop | Type | Default | Description |
|---|---|---|---|
| wordmark | string | "Velora" | The giant word at the bottom. Each character reacts on its own. |
| tagline | string | Statement shown above the link groups. | |
| groups | { title: string; links: { label: string; href: string }[] }[] | 3 groups | Link columns. |
| contact | { label: string; href: string } | { label: "hello@velora.studio", href: "mailto:hello@velora.studio" } | Pill link under the tagline. |
| legal | { label: string; href: string }[] | 3 links | Links in the bottom bar. |
| copyright | string | "© 2026 Velora Labs, Inc." | Copyright line. |
| radius | number | 0.22 | Reach of the pointer as a share of the footer width. |
| lift | number | 0.32 | How much a letter stretches at the pointer, as extra vertical scale. |
| accent | string | "#8b5cf6" | Fill, light pool and underline color. |
| className | string | "" | Extra classes for the root element. |
| style | CSSProperties | Inline styles merged after the accent variables. |