Avatar
Tilt Avatar
A portrait card that turns in 3D toward the cursor: the layers spread apart with parallax and a highlight follows the pointer. On touch it works by holding a finger.
React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.
What you can change
- name, role, badge and caption
- src — the profile photo; leave it empty and the frame shows the name's initials
- the accent colour via accent (the caption dot and focus ring)
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.club/c/avatar-040?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
How to use
<Avatar040 name="Maria Gurova" role="Product designer" src="/avatars/maria.webp" />A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Name
name· default: Maria Gurova- Role
role· default: Product designer- Badge
badge· default: 3D- Caption
caption· default: Hover or hold- Accent
accent· default: theme colour- Text colour
textColor· default: theme colour
More in Avatar
FAQ
- How do I add Tilt Avatar with Cursor or Claude Code?
- Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
- What does Tilt Avatar depend on?
- No npm packages beyond React and Tailwind CSS.
- What can I change in Tilt Avatar?
- Adapt: name, role, badge and caption; src — the profile photo; leave it empty and the frame shows the name's initials; the accent colour via accent (the caption dot and focus ring). Keep as installed: the tilt through CSS variables rx/ry rather than an inline transform: a single rule kills it under prefers-reduced-motion; perspective on the wrapper and transform-style: preserve-3d on the card — without them the layers stay flat and there is no parallax; the layers spread over translateZ: the photo deeper, the caption and badge closer — the parallax rests on this.
- Is Tilt Avatar free?
- Yes. The preview is open without an account; with a free account you can copy up to 20 components a month.
For developers
npx shadcn@latest add https://vibeui.club/r/pro/avatar-040.jsonThis command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options
Technical notes
A client component: the tilt is computed from the cursor position inside the card and driven by CSS variables rx/ry rather than an inline transform. The layers — photo, scrim, glare, caption, badge — are spread over depth through translateZ on a shared scene with perspective and transform-style: preserve-3d, so they move apart with parallax on tilt. The pointermove stream is throttled through requestAnimationFrame: only the last position is applied per frame. The glare is a radial gradient in soft-light blend mode whose centre gx/gy follows the pointer and whose opacity drops on leave. The theme comes from color-scheme through light-dark(), and the .dark class turns the dark theme on. Under prefers-reduced-motion a single rule kills the transform and the card stays flat.
Tags
- avatar
- profile
- card
- tilt
- 3d
- parallax
- hover
- interactive
- pointer
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…