Tween UITween UI
7

Components

Flip Card

A card that flips in 3D on hover to reveal details, features, and a CTA.

Hover the card (or tap on touch) and it flips in 3D: the front — number, title, image — rotates out while the back rotates in with the description, a feature list, and a CTA staggering into place. Driven by GSAP.

New tab

Web Design

Interfaces that convert

Designer working at a desk

Web Design

Research-led product and marketing design, from first wireframe to a polished, accessible UI.

  • UX & UI design
  • Design systems
  • Prototyping
Explore service

Installation

pnpm dlx shadcn@latest add @tween-ui/flip-card

Usage

app/page.tsx
app/page.tsx
import FlipCard from '@/components/tweenui/card/flip-card';
 
export default function Page() {
  return (
    <FlipCard
      eyebrow="(01)"
      title="Web Design"
      subtitle="Interfaces that convert"
      description="Research-led product and marketing design, from wireframe to polished UI."
      image="/services/web-design.jpg"
      features={['UX & UI design', 'Design systems', 'Prototyping']}
      href="/services/web-design"
      ctaText="Explore service"
    />
  );
}

Props

PropTypeDefaultDescription
titlestring—Card heading, shown on both faces.
eyebrowstring—Small label above the title, e.g. (01).
subtitlestring—Front-face supporting line under the title.
descriptionstring—Back-face body text revealed on flip.
imagestring—Front-face image URL.
imageAltstringtitleAlt text for the image.
featuresstring[][]Bullet points revealed on the back, staggered in.
hrefstring—CTA link on the back. Omit to hide the CTA.
ctaTextstring'Learn more'CTA label.
flippedboolean—Controlled flip state (disables hover/tap flipping).
onFlippedChange(flipped: boolean) => void—Fires when the card flips from interaction.

Accessibility

The card is focusable (tabIndex={0}); on hover-capable devices it also flips on keyboard focus and flips back on blur. Touch devices flip on tap instead. Under prefers-reduced-motion: reduce the faces swap instantly with no rotation or stagger.