Avatar

Team with a dossier drawer

Five dark portraits in a row where a card opens a dossier in a drawer on the right: the page dims and freezes, the panel slides in from the side, and only once it has settled does the text appear — photo, name, role, bio and a link. Closing runs in reverse. On hover the photo does not fade but warms up: an accent-colored glow from the bottom, a slight zoom, an orange frame, and a caption with an arrow rises from below.

What you can change

members — your people: id, name, role, photo, bio (an array of paragraphs), linkedin
title and description — the heading and intro above the grid
duration — the drawer travel in ms; panelWidth — its width in % of the viewport; overlay — the dim in %

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

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.

Heading

Drawer travel, ms

Drawer width, %

Dim, %

Drawer background

Drawer text

Accent

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/avatar-anim-004?lang=en&theme=dark

2Paste into the chat

3Get it in your project

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…

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

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.

Heading

Drawer travel, ms

Drawer width, %

Dim, %

Drawer background

Drawer text

Accent

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/avatar-anim-004?lang=en&theme=dark

2Paste into the chat

3Get it in your project

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

One file, zero dependencies, "use client", palette in local --vibeui-avatar-anim-004-* variables. It takes the theme from the environment via light-dark() plus a rule for the .dark class; the drawer colors can be set with the panelBackground and panelColor props. The opening choreography is entirely CSS transitions with delays: the [data-part=layer] toggles data-open, the dim and the panel travel for duration ms on cubic-bezier(0.45,0,0.55,1), the text inside ([data-part=sheet]) fades in over 240 ms with a delay of duration — that is, after the drawer has arrived. On close the delays swap: the text fades first, the panel and the dim wait 240 ms for it and leave after; the layer's visibility switches off when the whole chain ends. JS handles state, locking body scroll while open, Escape and returning focus to the card. The grid is computed from the block's own width: below 48rem a single-row horizontally scrolling strip with snap (a thin scrollbar is visible with a mouse), from 48rem a grid with all five in a row. A card is 3:4; on hover-capable devices the caption is hidden and rises on hover, the photo saturates and grows slightly, a warm accent-colored glow [data-part=glow] (mix-blend-mode: screen) and a 2px inner frame appear on top, the arrow in the caption corner is swapped for a second copy; without hover the caption is always visible and a plus sits in the card corner. The drawer is a fixed layer over the page: panelWidth % of the viewport width, below 48rem the full viewport; inside it has its own container-type, font sizes in cqi. The bio is an array of paragraphs, not HTML. Without a photo the card shows initials on a plate. prefers-reduced-motion zeroes durations and delays.