Components
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.
npx @21st-dev/cli add dhileepkumargm/electric-cardLoading preview...
"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>
</>
);
}