A profile card with a foil layer whose rainbow shifts with the pointer angle, an initials avatar and a stats row.
Staff Designer, Lumen
@mirak
npx shadcn@latest add https://hyperblur.dev/r/card-profile-holo.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/card-profile-holo.tsx.
import { CardProfileHolo } from "@/components/hyperblur/card-profile-holo"
<CardProfileHolo name="Mira Kovac" role="Staff Designer" handle="@mirak" />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Mira Kovac" | Full name. Also seeds the initials avatar color. |
| role | string | "Staff Designer, Lumen" | Job title line under the name. |
| handle | string | "@mirak" | Username shown in a lighter tone. Hidden when empty. |
| serial | string | "No. 014 / 120" | Collector number at the top left of the card. |
| stats | { label: string; value: string }[] | 3 sample stats | Stats in the footer row. The columns adapt to the count. |
| avatar | string | Avatar image URL. Initials on a gradient are shown when missing. | |
| hue | number | 210 | Starting hue of the foil rainbow, from 0 to 360. |
| tilt | number | 10 | Largest tilt angle in degrees. |
| ratio | number | 1.75 | Width divided by height of the card. |
| idle | boolean | true | Drift the foil along a slow path until the pointer arrives. |