Profile Card

A profile card that tilts toward the pointer with a holographic sheen, glare, and glow.

pointer3Dhover

Styled with ONONC's design tokens — shadcn add installs them for you.

Ava Bennett

Product Designer

@avabennettOnline

Customize

Name

Title

Handle

Status

Contact button

Contact label

Tilt12°

Sheen0.6

Holographic overlay intensity.

Moving glare

Behind glow

Accent

Accent 2

Corner radius22px

Prop	Type	Default	Description
`name`	`string`	`"Ava Bennett"`	Full name; also used to derive the avatar initials.
`title`	`string`	`"Product Designer"`	Role or subtitle beneath the name.
`handle`	`string`	`"avabennett"`	Social handle, rendered as @handle.
`status`	`string`	`"Online"`	Availability label shown beside the status dot.
`avatarUrl`	`string`	`—`	Avatar image URL; falls back to initials when omitted or on error.
`tilt`	`number`	`12`	Maximum pointer tilt in degrees; 0 disables the tilt.
`sheen`	`number`	`0.6`	Holographic sheen overlay intensity (0–1).
`glare`	`boolean`	`true`	Render a moving specular highlight that tracks the pointer.
`behindGlow`	`boolean`	`true`	Render a soft blurred colored glow behind the card.
`color`	`string`	`"#8b5cf6"`	Primary accent color (hex).
`color2`	`string`	`"#22d3ee"`	Secondary accent color (hex).
`radius`	`number`	`22`	Corner radius in pixels.
`showContact`	`boolean`	`true`	Render the contact button.
`contactLabel`	`string`	`"Message"`	Text label for the contact button.
`onContact`	`() => void`	`—`	Called when the contact button is activated.