Plasma Card

Cards

About

An interactive, physics-driven plasma card with fluid blob motion, stress-reactive colors, and smooth glassmorphism for futuristic dashboards.

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

Code

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

Usage.tsx

import { PlasmaCard } from "@/components/ui/plasma-card";

const Page = () => {
  return (
    <main className="min-h-screen w-full bg-black flex flex-col items-center justify-center p-8 text-white font-sans">
      <div className="w-full max-w-6xl">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold tracking-tighter text-zinc-100">
            Containment Sector 4
          </h1>
          <p className="text-zinc-500 mt-2">
            Interactive fluid dynamics simulation. Drag capsules to test stability.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
          <PlasmaCard label="SPECIMEN: VENOM" className="h-100" />
          <PlasmaCard label="SPECIMEN: CARNAGE" className="h-100" />
          <PlasmaCard label="SPECIMEN: RIOT" className="h-100" />
        </div>
      </div>
    </main>
  );
};

export default Page;