ProfileCard
profile-card指针倾斜 + 全息炫彩名片卡 · RAF 阻尼弹簧驱动 3D 旋转/光晕（零依赖）+ chart token 全息渐变 + 无头像落首字母占位（reduced-motion 静态降级）
用法
基础用法
无头像时落「姓名首字母」占位，默认开启指针倾斜 + 全息光泽。
林屿
独立开发者
林
@linyu在线
tsx
<ProfileCard name="林屿" title="独立开发者" handle="linyu" />光晕配色
glowColor 喂带 --color- 前缀的 chart token，驱动径向光晕与边缘炫彩。
苏晚
产品设计师
苏
@suwan忙碌
tsx
<ProfileCard
name="苏晚"
title="产品设计师"
handle="suwan"
status="忙碌"
glowColor="var(--color-chart-3)"
/>静态卡片
enableTilt={false} 关闭倾斜与指针交互，保留渐变与底部信息条。
瑚琏
前端工程师
瑚
@hulianui在线
tsx
<ProfileCard
name="瑚琏"
title="前端工程师"
handle="hulianui"
enableTilt={false}
/>隐藏信息条
showUserInfo={false} 去掉底部毛玻璃信息条，仅留主标题与头像。
Javi Torres
Software Engineer
tsx
<ProfileCard
name="Javi Torres"
title="Software Engineer"
showUserInfo={false}
glowColor="var(--color-chart-2)"
/>何时用
做个人/成员名片（作品集、团队页、社交卡）且要全息炫彩+指针倾斜的高级感时用。本组件是有结构语义的名片（姓名/职位/handle/状态/联系按钮 + 底部毛玻璃信息条）；只要一张通用图片做指针倾斜用 TiltedCard，要悬停像素动画卡用 PixelCard。
导入
ts
import { ProfileCard } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| avatarUrl | string | — | 头像地址，未提供时回退为姓名首字母占位块（不引外链） |
| name | string | "瑚琏" | 姓名，底部主标题；无头像时据此生成首字母占位 |
| title | string | "前端工程师" | 职位/副标题，姓名下方 |
| handle | string | "hulianui" | 用户 handle（@xxx），底部信息条左侧 |
| status | string | "在线" | 状态文案，handle 下方 |
| contactText | string | "联系" | 联系按钮文案 |
| showUserInfo | boolean | true | 是否显示底部毛玻璃信息条（handle/状态/联系按钮） |
| enableTilt | boolean | true | 是否开启指针倾斜 + 全息光泽；关闭后为静态卡；reduced-motion 自动降级静态 |
| glowColor | string | var(--color-chart-1) | 全息高光主色，须用带 --color- 前缀的 token，也可传任意 CSS 颜色 |
| aspectRatio | number | 0.74 | 卡片宽高比（width/height），默认接近实体卡 |
| className | string | — | 透传到根容器的额外 className |
| style | CSSProperties | — | 透传到根容器的内联样式 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onContactClick | () => void | 点击联系按钮回调 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 自定义卡片正面叠加内容（头像层之上、信息条之下） |
禁忌 / 坑
- [[hulian-token-color-var-needs-color-prefix]]：
glowColor须用var(--color-chart-1)等带--color-前缀的真名，裸var(--chart-1)/var(--primary)在 Tailwind v4 下不解析、全息高光失色。 - 纯 RAF 弹簧零依赖，无 WebGL；
enableTilt={false}或 reduced-motion 下退化为静态卡（仍有渐变与信息条），不要依赖倾斜传递信息。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
林屿
独立开发者
林
@linyu在线
<div className="grid min-h-[520px] place-items-center rounded-xl"
style={{ background: "oklch(0.16 0.02 265)" }}>
<ProfileCard
name="林屿"
title="独立开发者"
handle="linyu"
status="在线"
enableTilt={true}
glowColor="var(--color-chart-1)"
/>
</div>