Diagram Card

Cards 286

About

A mousemove effect that reveals text content by dragging the cursor across the card. As seen on Diagram's website.

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

Code

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

Usage.tsx

"use client";
import React from "react";
import {
  TextRevealCard,
  TextRevealCardTitle,
  TextRevealCardDescription,
} from "../components/ui/diagram-card";

export default function DiagramCardDemo() {
  return (
    <div className="flex items-center justify-center w-full min-h-screen bg-[#0E0E10] p-8">
      <TextRevealCard
        text="You know the business"
        revealText="I know the chemistry"
      >
        <TextRevealCardTitle>
          Sometimes, you just need to see it.
        </TextRevealCardTitle>
        <TextRevealCardDescription>
          This is a text reveal card. Hover over the card to reveal the hidden
          text.
        </TextRevealCardDescription>
      </TextRevealCard>
    </div>
  );
}