Components
Loading preview...
Vanilla HTML/CSS/JS version is also available on https://codepen.io/Northstrix/pen/myJaQXK Credit: https://codepen.io/nefejames/pen/NPKQPQB https://ui.aceternity.com/components/canvas-reveal-effect https://www.perplexity.ai/
@Northstrix
npx shadcn@latest add https://21st.dev/r/maxim.bort.devel/fancy-cardimport React from "react";
import { FancyCard } from "@/components/ui/fancy-card";
const cardExamples = [
{
label: "Circles (Hover To Reveal)",
props: {
width: 312,
aspectRatio: "3/4",
outerRadius: 12.56,
innerRadius: 12,
borderWidth: 1,
bgColor: "#151419",
fgColor: "#8F04A7",
outlineColor: "#33313d",
hoverOutlineColor: "#494658",
imageSrc:
"https://raw.githubusercontent.com/Northstrix/my-portfolio/refs/heads/main/public/playground-card-image.webp",
imageHeightPercent: 64,
bgEffect: 1,
rtl: false,
inscription: ["洪", "秀", "全"],
},
},
{
label: "Color Columns",
props: {
width: 312,
aspectRatio: "1/1",
outerRadius: 8,
innerRadius: 36,
borderWidth: 6,
bgColor: "#fffbe6",
fgColor: "#333",
outlineColor: "#f59e42",
hoverOutlineColor: "#fffbe6",
imageSrc:
"https://raw.githubusercontent.com/Northstrix/my-portfolio/refs/heads/main/public/modal-card-image.webp",
imageHeightPercent: 70,
bgEffect: 2,
columnsGradient:
"linear-gradient(90deg, #ffb347 0%, #ff7043 25%, #d97706 50%, #fbbf24 75%, #fffbe6 100%)",
rtl: false,
inscription: ["收", "穫"],
},
},
{
label: "Color Grid Columns (RTL)",
props: {
width: 224,
aspectRatio: "9/16",
outerRadius: 12.56,
innerRadius: 12,
borderWidth: 12,
bgColor: "#484848",
fgColor: "#fff",
outlineColor: "#242424",
hoverOutlineColor: "#fff",
imageSrc:
"https://raw.githubusercontent.com/Northstrix/my-portfolio/refs/heads/main/public/modal-card-image.webp",
imageHeightPercent: 50,
bgEffect: 3,
boxColumns: 8,
boxRows: 14,
boxColors: [
"#ffb347",
"#ff7043",
"#d97706",
"#fbbf24",
"#fffbe6",
"#23244a",
"#eab308",
"#38bdf8",
],
rtl: true,
inscription: ["קָצִיר"],
},
},
{
label: "Diagonal Stripes",
props: {
width: 312,
aspectRatio: "3/4",
outerRadius: 8.34,
innerRadius: 8,
borderWidth: 4,
bgColor: "#fff3b5",
fgColor: "#000",
outlineColor: "#FBC32F",
hoverOutlineColor: "#FF7A4C",
imageSrc:
"https://raw.githubusercontent.com/Northstrix/my-portfolio/refs/heads/main/public/second-playground-card-image.webp",
imageHeightPercent: 64,
bgEffect: 4,
stripe1: "#fbbf24",
stripe2: "#ff7043",
stripe3: "#fffbe6",
rtl: false,
inscription: ["P E N U M B R A"],
},
},
{
label: "Spiral Animation (No Hover)",
props: {
width: 312,
aspectRatio: "3/4",
outerRadius: 18,
innerRadius: 16,
borderWidth: 3,
bgColor: "#111014",
fgColor: "#d044ff",
outlineColor: "#2a2a3d",
imageSrc:
"https://raw.githubusercontent.com/Northstrix/my-portfolio/refs/heads/main/public/playground-card-image.webp",
imageHeightPercent: 68,
bgEffect: 6,
rtl: false,
inscription: ["鬼", "札"],
spiral1Color: "#d044ff",
},
},
{
label: "Shapes Animation (No Hover)",
props: {
width: 312,
aspectRatio: "3/4",
outerRadius: 18,
innerRadius: 16,
borderWidth: 3,
bgColor: "#111014",
fgColor: "#338cff",
outlineColor: "#2a2a3d",
imageSrc:
"https://raw.githubusercontent.com/Northstrix/my-portfolio/refs/heads/main/public/playground-card-image.webp",
imageHeightPercent: 68,
bgEffect: 7,
rtl: false,
inscription: ["鬼", "札"],
},
},
{
label: "Color Rush (No Hover)",
props: {
width: 312,
aspectRatio: "3/4",
outerRadius: 18,
innerRadius: 16,
borderWidth: 3,
bgColor: "#18161c",
fgColor: "#fff",
outlineColor: "#363636",
imageSrc:
"https://raw.githubusercontent.com/Northstrix/my-portfolio/refs/heads/main/public/second-playground-card-image.webp",
imageHeightPercent: 68,
bgEffect: 8,
rtl: false,
inscription: ["紹", "菜"],
},
},
];
export default function DemoOne() {
return (
<div
style={{
padding: 24,
}}
>
<div
style={{
display: "flex",
flexWrap: "wrap",
gap: 32,
justifyContent: "center",
alignItems: "flex-start",
}}
>
{cardExamples.map(({ label, props }, idx) => (
<div
key={label}
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<div
style={{
color: "#777",
fontSize: 24,
marginBottom: 24,
marginTop: 0,
textAlign: "center",
userSelect: "none",
pointerEvents: "none",
}}
>
{label}
</div>
<FancyCard {...props} />
</div>
))}
</div>
</div>
);
}