Hairline Riffle

Cards 122

About

An isometric SVG illustration of a tray of eight cards where hovering or pressing the arrow keys pulls the card under the pointer forward and lifts it, while the cards around it lean away in a staggered ripple.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hairline Riffle to your project and fits it to your theme.

Code

How Hairline Riffle is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Riffle from "@/components/ui/hairline-riffle";

export default function RiffleDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-10">
      <div className="w-full max-w-xl text-foreground">
        <Riffle aria-label="A tray of eight cards. Hover or use the arrow keys to pull a card." className="w-full" />
      </div>
    </div>
  );
}