Interface
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.
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
- 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
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-anim-004?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
<AvatarAnim004
title="Who makes VibeUI"
description="Tap a card to read who does what."
duration={650}
panelWidth={60}
overlay={35}
members={[
{
id: "anna",
name: "Anna Smith",
role: "Art Director",
photo: "/team/anna.jpg",
linkedin: "https://www.linkedin.com/in/anna",
bio: ["First paragraph.", "Second paragraph."],
},
]}
/>A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Heading
title· default: Who makes VibeUI- Drawer travel, ms
duration· default: 650- Drawer width, %
panelWidth· default: 70- Dim, %
overlay· default: 28- Drawer background
panelBackground· default: theme colour- Drawer text
panelColor· default: theme colour- Accent
accent· default: theme colour
More in Interface
FAQ
- How do I add Team with a dossier drawer 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 Team with a dossier drawer depend on?
- No npm packages beyond React and Tailwind CSS.
- What can I change in Team with a dossier drawer?
- Adapt: 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 %. Keep as installed: the local --vibeui-avatar-anim-004-* palette — do not swap it for theme tokens; the drawer colors come from the panelBackground and panelColor props; the choreography order: the dim and the panel travel together, the text appears with a delay of duration, on close the text fades first and the panel waits 240 ms for it; this is done by transition-delay on [data-part=layer][data-open], do not rewrite it with JS timers or an animation library; the drawer as a fixed layer over the page with body scroll lock, Escape and focus return to the card.
- Is Team with a dossier drawer free?
- The preview is open to everyone; the source is available with a PRO subscription.
For developers
npx shadcn@latest add https://vibeui.club/r/pro/avatar-anim-004.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
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.
Tags
- team
- people
- drawer
- sidebar
- panel
- slide-in
- overlay
- bio
- portrait
- row
- hover
- glow
- about
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…