VibeUI
РусEng
Sign in
All104Background6Promo scenes9Cursors5Card stacks12Interface30Error screens19Hand-drawn23

Promo scenes

Card that opens into a modal

A card with two photos: on click it flies from its cell to the centre of the screen, grows 1.35× and flips in one motion — the back shows the second photo and a glass panel with a description and a link. Inside the window a click flips it back. Closing reverses the animation; focus is trapped, Escape closes.

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

  • image, imageBack, eyebrow, title, hint, backTitle, text, linkLabel, linkHref or custom panel content via children
  • aspect, width, zoom, closeLabel
  • accent, tone, radius and duration via the --vibeui-flip-002-radius and -duration variables (DURATION in code must match)

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

Preview

1440pxHost theme
Card that opens into a modal — A card with two photos: on click it flies from its cell to the centre of the screen, grows 1.35× and flips in one motion — the back shows the second photo and a glass panel with a description and a link. Inside the window a click flips it back. Closing reverses the animation; focus is trapped, Escape closes.

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.
AI
1Pick it here

put this on the home page as the hero:

https://vibeui.club/c/flip-002?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…

How to use

<Flip002
  image="/photos/house-front.webp"
  imageBack="/photos/house-terrace.webp"
  eyebrow="Private collection"
  title="The light room"
  hint="Click to open the story"
  backTitle="Designed around stillness"
  text="Natural materials and measured openings shape a calm place for art and changing light."
  linkLabel="View the project"
  linkHref="/projects/house"
/>

A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.

Settings

Theme
tone · default: auto
Aspect
aspect · default: 4 / 5
Zoom
zoom · default: 1.35
Title
title · default: The light room
Accent
accent · default: theme colour

More in Promo scenes

FAQ

How do I add Card that opens into a modal 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 Card that opens into a modal depend on?
npm packages: react-dom.
What can I change in Card that opens into a modal?
Adapt: image, imageBack, eyebrow, title, hint, backTitle, text, linkLabel, linkHref or custom panel content via children; aspect, width, zoom, closeLabel; accent, tone, radius and duration via the --vibeui-flip-002-radius and -duration variables (DURATION in code must match). Keep as installed: animation via transform only (translate, scale, rotateY) on one element — the window is laid out at its final size, so the flight recalculates no layout; the portal into body and the card copy in the layer: position:fixed breaks inside transformed ancestors; the reflow and requestAnimationFrame before the start, the reverse animation on close, focus return to the card and the flip of the window on click.
Is Card that opens into a modal 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/flip-002.json

npm dependencies: react-dom

This 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, the only dependency is react-dom (createPortal), “use client”. The in-flow card is a div role=button with a photo, a flip badge and a glass panel (eyebrow, title, hint). On click getBoundingClientRect is measured and a position:fixed layer with perspective:1400px, a backdrop (12px blur) and a flyer is portalled into body: absolute at the window's size and position (the card ×zoom centred, never larger than the screen with a gutter), transform-style:preserve-3d, an initial translate/scale transform places it exactly over the card; the original is hidden with visibility:hidden. After a reflow and requestAnimationFrame the transform becomes translate(0) scale(1) rotateY(180deg) over .5s cubic-bezier(.2,.9,.25,1): flight, growth and flip as one motion, only transform animates — a composited layer, no layout recalculation and no photo re-rasterisation per frame. Sides are absolute inset:0 with backface-visibility:hidden and translateZ(1px); the back is pre-rotated 180° and carries the second photo and a panel with backTitle, text and a link; a click on a side flips the window, the close button is on both sides, the hidden side is inert. Closing returns the initial transform; after 500ms the layer is removed and focus returns to the card. While open: body overflow:hidden with scrollbar compensation, Escape closes, Tab cycles inside the window, resize re-centres. Palette --vibeui-flip-002-* with light-dark, Manrope via <link precedence>.

Tags

  • flip
  • modal
  • flip card
  • 3d
  • morph
  • expand
  • dialog
  • lightbox
  • two photos
  • card
Component source

The same file your agent installs. Here in case you would rather copy it by hand.

Loading…