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.
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.ru/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…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
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…