Electric Card

Cards 20

About

A reusable UI component for a glowing, electric-style card with a turbulent border effect. It can be used to showcase content in a visually dynamic way.

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

"use client";

import React from "react";
import InteractiveCharacter from "@/components/ui/interactive-3d-character";
import { ElectricCard } from "@/components/ui/electric-card";

export default function DemoThreeCards() {
  return (
    <>
      <svg
        aria-hidden="true"
        style={{ width: 0, height: 0, position: "absolute" }}
      >
        <defs>
          <filter
            id="turbulent-displace"
            colorInterpolationFilters="sRGB"
            x="-20%"
            y="-20%"
            width="140%"
            height="140%"
          >
            <feTurbulence
              type="turbulence"
              baseFrequency="0.02"
              numOctaves="10"
              result="noise1"
              seed="1"
            />
            <feOffset in="noise1" dx="0" dy="0" result="offsetNoise1">
              <animate
                attributeName="dy"
                values="700;0"
                dur="6s"
                repeatCount="indefinite"
                calcMode="linear"
              />
            </feOffset>

            <feTurbulence
              type="turbulence"
              baseFrequency="0.02"
              numOctaves="10"
              result="noise2"
              seed="2"
            />
            <feOffset in="noise2" dx="0" dy="0" result="offsetNoise2">
              <animate
                attributeName="dy"
                values="0;-700"
                dur="6s"
                repeatCount="indefinite"
                calcMode="linear"
              />
            </feOffset>

            <feComposite in="offsetNoise1" in2="offsetNoise2" result="part1" />
            <feDisplacementMap
              in="SourceGraphic"
              in2="part1"
              scale="30"
              xChannelSelector="R"
              yChannelSelector="B"
            />
          </filter>
        </defs>
      </svg>

      <main style={{ padding: 24, display: "flex", gap: 24, flexWrap: "wrap", justifyContent: "center" }}>
        <ElectricCard variant="green">
          <div className="character-container">
            <InteractiveCharacter />
          </div>
        </ElectricCard>

        <ElectricCard variant="green">
          <div className="character-container">
            <InteractiveCharacter />
          </div>
        </ElectricCard>

        <ElectricCard variant="green">
          <div className="character-container">
            <InteractiveCharacter />
          </div>
        </ElectricCard>
      </main>
    </>
  );
}