Metallic Link
A link styled as a neutral button inside a chrome rim, with a reflection that travels around it and a sheen on hover. The reflection drifts only while the link is on screen.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| href | string | — | Where the link goes. |
| paused | boolean | false | Stops the travelling reflection, keeping the chrome rim. |
| pressScale | number | 0.93 | How far it shrinks when pressed. |
| inverted | boolean | false | A face in the ink colour with light text: dark in light mode, light in dark mode. |
| ...anchor | HTMLMotionProps<"a"> | — | Any other anchor or Motion prop, className included. |