ReflectiveCard
reflective-cardDisplays slotted content on a metallic card with animated diagonal reflection.
Usage
Basic usage
Metal reflective ID card ready to use out of the box, with high-gloss strips sweeping back and forth along the diagonal, built-in by default on title / subtitle / footer.
ALEXANDER DOE
SENIOR DEVELOPER
<ReflectiveCard />Customized copywriting and color matching
sheenColor controls the main highlight color, baseColor controls the base color, and title / subtitle / footer are all customizable.
JANE SMITH
PLATINUM MEMBER
<ReflectiveCard
sheenColor="oklch(0.85 0.16 85)"
baseColor="var(--color-chart-3)"
title="JANE SMITH"
subtitle="PLATINUM MEMBER"
footerLabel="MEMBER NO."
footerValue="0042-7781-1190"
/>Metallic and frosted
metalness controls the intensity of the highlight layer, roughness controls the frosted noise, and speed controls the highlight sweep duration (seconds).
ALEXANDER DOE
SENIOR DEVELOPER
<ReflectiveCard metalness={0.4} roughness={0.8} speed={9} />Custom content
Passed by children Completely replaces the built-in layout, retaining only the metallic reflective background and borders.
Hulian
Reflective Card
<ReflectiveCard baseColor="var(--color-chart-2)">
<div className="flex h-full flex-col items-center justify-center gap-3 text-center">
<p className="text-3xl font-bold tracking-widest">Hulian</p>
<p className="text-xs uppercase tracking-[0.3em] opacity-70">
Reflective Card
</p>
</div>
</ReflectiveCard>When to use
Use ReflectiveCard for a metallic ID, membership, or profile card with built-in title, subtitle, badge, and footer fields. Pass children to replace that layout. Use Card for ordinary content, PricingTable for plan comparison, or Book3D for a dimensional book cover.
Import
import { ReflectiveCard } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| sheenColor | string | var(--color-foreground) | Main metallic sheen color. |
| baseColor | string | var(--color-chart-1) | Base surface color controlling darker metallic regions. |
| speed | number | 6 | Duration of one sheen pass in seconds. |
| roughness | number | 0.35 | Surface noise from 0 for mirror-smooth to 1 for heavily frosted. |
| metalness | number | 1 | Overall sheen opacity from 0 to 1. |
| className | string | — | Class name forwarded to the root. |
| style | CSSProperties | — | Inline styles forwarded to the root. |
Slots
| Slot | Type | Description |
|---|---|---|
| title | ReactNode | Large primary name or card title. |
| subtitle | ReactNode | Smaller role or tier below the title. |
| badge | ReactNode | Header badge beside the lock icon; null removes the entire badge region. |
| footerLabel | ReactNode | Small lower-left label such as "ID NUMBER". |
| footerValue | ReactNode | Monospaced lower-left value. |
| children | ReactNode | Replaces the entire built-in ID layout while retaining the reflective surface and border. |
Usage notes
- The sheen and noise are clearest on a dark stage and become subtle on light backgrounds.
- Passing
childrendisables the built-in title, subtitle, badge, and footer slots. - Use full
--color-token names such asvar(--color-chart-1). [[hulian-token-color-var-needs-color-prefix]] explains why barevar(--primary)does not resolve.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
ALEXANDER DOE
SENIOR DEVELOPER
<div className="flex items-center justify-center rounded-xl p-8"
style={{ background: "oklch(0.16 0.02 255)" }}>
<ReflectiveCard
speed={6}
roughness={0.35}
metalness={1}
/>
</div>