Flip Portrait Tiles

Show customer testimonials as a wall of square portrait tiles. The front is a gradient portrait placeholder generated from a hue (or your own photoSrc) with the name and title overlaid in the bottom-left corner; when the pointer enters, the tile flips over in 3D on a spring and the back shows the quote, company and star rating. The flip direction follows the edge the pointer entered from; on touch devices a tap flips the tile and another tap flips it back, and keyboard users toggle with Enter or Space. On entrance the tiles fade in staggered along the diagonal.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<FlipPortraitTiles/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/flip-portrait-tiles.en.json

Usage

import { FlipPortraitTiles } from "@/components/ui/flip-portrait-tiles";

<FlipPortraitTiles
  eyebrow="客戶回饋"
  title="他們這樣說"
  columns={4}
  testimonials={[
    {
      quote: "改版後的訂位頁讓週末候位少了一半。",
      highlight: "少了一半",
      name: "林曉晴",
      role: "店長",
      company: "青嶼咖啡",
      rating: 5,
    },
    {
      quote: "司機端的簽收流程終於順了。",
      name: "陳柏宇",
      role: "營運主管",
      company: "北辰物流",
      rating: 4,
      photoSrc: "/images/chen.jpg",
    },
  ]}
/>

Props

FlipPortraitTilesItem

How it works

• Flip direction: with flipDirection="auto" the edge nearest to where the pointer entered decides — enter from the left and it flips right, from the right it flips left, from the top it flips down, from the bottom it flips up; on touch the edge nearest to the press point decides. A flipped tile never changes axis, so it cannot jump mid-flip.
• Trigger: auto checks (pointer: coarse). SSR and the first render always use hover mode and switch after mount. In hover mode several tiles can be open at once; in tap mode each tile toggles on its own and a second tap flips it back.
• Timing and color: spring damping is fixed at 22, stiffness comes from stiffness or --wb-flip-portrait-tiles-stiffness; the accent only flows through --wb-flip-portrait-tiles-accent (default #0d9488, #2dd4bf in dark mode) and is used for highlights, stars and the focus ring.
• The portrait placeholder needs no image: a two-tone gradient from the hue plus an abstract bust silhouette. The hue is deterministic, so server and browser render the same thing.

Accessibility

• The root is a section labelled by its title via aria-labelledby
• Each tile's interaction layer is a button with aria-pressed (flipped or not) and an aria-label of "查看 name 的評價" ("View name's testimonial" in the English build); Tab moves between tiles, Enter or Space flips
• The quote is rendered as figure / blockquote / figcaption outside the button: the back face is aria-hidden while unflipped and readable once flipped; the stars carry hidden "Rated N out of 5" text
• When the user has reduce motion enabled, there is no 3D rotation or scale entrance — flipping becomes a 150ms crossfade between front and back, and the entrance is a plain fade