Electric-Card

Cards 195

About

A highly customizable animated card component featuring real-time SVG turbulence, displacement, and hue-shift effects. Perfect for dramatic UI sections, feature highlights, hero areas, or attention-grabbing product cards — all wrapped in a glowing, futuristic aesthetic.

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

Code

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

Usage.tsx

import { ElectricCard  } from "@/components/ui/electric-card";

export default function DemoOne() {
 return <main
      style={{
        minHeight: "100vh",
        display: "grid",
        placeItems: "center",
        gap: "1rem",
        padding: "2rem",
        backgroundColor: "oklch(0.145 0 0)",
      }}
    >
      {/* Swirl variant (matches your "Original") */}
      <ElectricCard
        variant="swirl"
        color="#dd8448"
        badge="Dramatic"
        title="Original"
        description="In case you'd like to emphasize something very dramatically."
      />

      {/* Hue variant (matches your "Hue") */}
      <ElectricCard
        variant="hue"
        color="DodgerBlue"
        badge="Dramatic"
        title="Hue"
        description="In case you'd like to emphasize something very dramatically."
      />
    </main>
}