Business Card Reel

Customer testimonials as landscape business cards on a full-width horizontal reel. Each card has an initials gradient avatar, the name and role · company at the top left, a company wordmark at the top right, a quote of up to three lines in the middle, and tags such as industry and plan below a hairline divider. The reel uses native scrolling with scroll-snap: touch and trackpads swipe directly, a mouse can press and drag with inertia, and the arrows in the header move one card at a time. Every card scales, fades and tilts with rotateY according to its distance from the reel centre, so the middle card is always the largest and clearest.

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

<BusinessCardReel/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/business-card-reel.en.json

Usage

import { BusinessCardReel } from "@/components/ui/business-card-reel";

<BusinessCardReel
  eyebrow="Customer stories"
  title="The first month after rollout"
  testimonials={[
    {
      quote: "Building the weekly store rota used to take half a day. Now managers finish it in ten minutes.",
      name: "Maya Collins",
      role: "Operations Manager",
      company: "Islet Coffee",
      companyMark: "Islet",
      highlight: "in ten minutes",
      tags: ["Food & drink", "Team plan"],
    },
    // ...
  ]}
  cardWidth={320}
  tilt={8}
  onChange={(index) => console.log(`centred card ${index + 1}`)}
/>

Props

BusinessCardReelItem

How it works

• Distance mapping: each card turns the distance between its centre and the reel centre into a ratio d (0–1) and maps it to scale 1 → 0.88, opacity 1 → 0.5 and rotateY 0 → ±tilt, driven by the scroll position from useScroll({ container }) without re-rendering.
• The track is padded by half the reel width minus half a card on each side, so the first and last cards can snap to the exact centre as well.
• Mouse dragging temporarily disables scroll-snap, applies velocity-based inertia after release, then hands back to snapping on the nearest card; the release does not trigger clicks inside cards. Touch and trackpads keep native scrolling.
• onChange fires only after scrolling stops and the reel has snapped; cards passed during a smooth scroll are not reported, so controlled mode is never interrupted by intermediate indexes.
• The accent goes through --wb-business-card-reel-accent only (default #0d9488 in light, #2dd4bf in dark) for the eyebrow, quote highlight and focus ring; the entrance duration uses --wb-business-card-reel-duration.

Accessibility

• The root is a section with aria-labelledby pointing at the heading; each testimonial is a figure with the quote in blockquote and the name and role in figcaption
• The reel is role="region" with an aria-label and tabIndex=0; once focused, ← / → move one card and Home / End jump to either end
• The arrow buttons are type="button" with an aria-label and aria-controls pointing at the reel, and are disabled at either end
• After snapping, an aria-live="polite" region announces the position ("Testimonial 2 of 6") and the name
• When the user has reduce motion enabled, distance scaling, fading and tilting are turned off, arrows jump instantly, dragging has no inertia and the entrance becomes a 150ms fade; scroll-snap is kept