3D Tilt Review Card

A testimonial section that tells one customer story at a time. The centred card rests at a slight angle; move the pointer over it and it tilts in 3D perspective based on the pointer position, with a sheen that follows the pointer across the surface. The big quote mark, the quote and the author row float above the card along the Z axis, while the blurred blobs and fine grid behind it shift the opposite way to add depth. Switching with the buttons below turns the card edge-on, swaps in the next entry and turns it back, in the direction of "previous" or "next". The current index supports both controlled and uncontrolled modes.

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">

<ThreeDTiltReviewCard/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/3d-tilt-review-card.en.json

Usage

import { ThreeDTiltReviewCard } from "@/components/ui/3d-tilt-review-card";

<ThreeDTiltReviewCard
  eyebrow="客戶怎麼說"
  title="一張卡，說一個真實的改變"
  testimonials={[
    {
      quote: "換上新的點餐頁之後，尖峰時段的出杯速度明顯快了一截。",
      name: "林語晴",
      role: "營運經理",
      company: "青嶼咖啡",
      rating: 5,
      highlight: "出杯速度明顯快了一截",
      metric: { value: "+32%", label: "尖峰出杯量" },
    },
    {
      quote: "新進同仁第一天就能自己跑完整條路線。",
      name: "周柏翰",
      role: "調度主任",
      company: "北辰物流",
    },
  ]}
  maxTilt={10}
  restRotate={-3}
  onIndexChange={(i) => console.log(`切到第 ${i + 1} 則`)}
/>

Props

ThreeDTiltReviewCardItem

How it works

• Timing variables: --wb-3d-tilt-review-card-stiffness (tilt spring, default 200, damping fixed at 20), --wb-3d-tilt-review-card-duration (total flip time, default 500ms, split evenly between exit and enter) and --wb-3d-tilt-review-card-rest (resting tilt, default -3deg). The accent colour comes from --wb-3d-tilt-review-card-accent (#0d9488 light, #2dd4bf dark).
• Layers: the big quote mark sits at translateZ(60px), the quote and author row at translateZ(40px); the card itself does not use overflow-hidden, so the 3D is not flattened.
• The sheen is a 15% white radial-gradient whose centre follows the pointer; when the pointer leaves, tilt and sheen spring back to rest with the same spring.
• Flip direction: "next" turns to 90° and comes back from -90°, "previous" does the reverse; wrapping from the last entry to the first still counts as "next".
• Touch devices (pointer: coarse) skip pointer tilt and keep only the resting tilt and the flip.

Accessibility

• The root is a <section>; with a title it uses aria-labelledby pointing at the heading, otherwise the eyebrow or "Testimonials" becomes its aria-label
• Each entry renders as <figure> / <blockquote> / <figcaption>; the star rating is announced through role="img" with a text label
• Switch buttons are type="button" with an aria-label and a focus-visible ring; the left and right arrow keys switch entries within the button group
• On switch, a visually hidden aria-live="polite" region announces the position ("2 of 4") and the quote; the two cards that briefly coexist mid-flip are not announced twice
• When the system's reduce motion setting is on, pointer tilt, sheen and flip are disabled and switching becomes a 150ms crossfade; entries can still be switched with the buttons