Sweep Cards

Cards

About

A row of pastel question-and-answer cards where an animated demo cursor sweeps across and highlights the key phrase in each answer as the cards scroll into view.

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

Code

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

Usage.tsx

"use client";

import { SweepCards, TONES, type SweepCard } from "@/components/ui/sweep-cards";

const CARDS: SweepCard[] = [
  {
    title: "Why do answer engines skip your site?",
    body: "Most pages are built only for human eyes, so AI crawlers are left to guess what they mean. We find [[the quiet problems in your markup]] that make answer engines pass you by.",
    tone: TONES.sky,
  },
  {
    title: "How do you make a site easy for AI to read?",
    body: "We build a lean second copy of your site, full of [[clean structured data]] taken straight from the pages you already have, so language models can read it at a glance.",
    tone: TONES.mint,
  },
  {
    title: "How do you get named in AI answers?",
    body: "Assistants skip past layout code and go looking for [[clear, well-labelled facts]]. That is what gets Masar recommended accurately when people ask.",
    tone: TONES.butter,
  },
];

export default function SweepCardsDemo() {
  return (
    <div className="w-full min-h-screen">
      <SweepCards cards={CARDS} theme="dark" className="w-full" />
    </div>
  );
}