Cards

Flip card

A 3D card with two sides: a photo with a caption in front, a description and a link on the back. Flips on click, keyboard or hover around a vertical or horizontal axis. Custom content for both sides via children props.

What you can change

image, eyebrow, title, text, linkLabel, linkHref or fully custom front and back
trigger (click | hover), axis (y | x), aspect, width, hint, flipped
accent, tone, radius and duration via the --vibeui-flip-001-radius and -duration variables

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.

Theme

Trigger

Axis

Aspect

Title

Hint

Accent

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/flip-001?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.

Theme

Trigger

Axis

Aspect

Title

Hint

Accent

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/flip-001?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” for state. The outer block holds perspective:1400px, the card has transform-style:preserve-3d and a transform transition of .8s cubic-bezier(.2,.8,.2,1); with data-flipped the card gets rotateY(180deg) (or rotateX for axis=x). Sides are absolute inset:0 with backface-visibility:hidden and translateZ(1px), the back is pre-rotated 180°. The hidden side gets the inert attribute so Tab does not land on an invisible link. trigger=hover flips via :hover without state. The back link stops click propagation so it does not flip the card back. Palette --vibeui-flip-001-* with light-dark; Manrope via <link precedence>. Aspect ratio and width are the --vibeui-flip-001-aspect and -width variables from the aspect and width props (22rem by default, max-width:100%).