49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import type { CardFaceProps } from "./types";
|
|
|
|
/** 卡面：渐变光晕 + 噪点纹理 */
|
|
export function GlowFace(_: CardFaceProps) {
|
|
return (
|
|
<>
|
|
{/* 噪点纹理 SVG filter */}
|
|
<svg className="absolute size-0">
|
|
<filter id="card-noise">
|
|
<feTurbulence
|
|
type="fractalNoise"
|
|
baseFrequency="0.65"
|
|
numOctaves="3"
|
|
stitchTiles="stitch"
|
|
/>
|
|
<feColorMatrix type="saturate" values="0" />
|
|
<feBlend in="SourceGraphic" mode="overlay" result="blend" />
|
|
<feComposite in="blend" in2="SourceGraphic" operator="in" />
|
|
</filter>
|
|
</svg>
|
|
|
|
{/* 噪点层 */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.18] mix-blend-overlay"
|
|
style={{ filter: "url(#card-noise)" }}
|
|
/>
|
|
|
|
{/* 左下光晕 */}
|
|
<div
|
|
className="absolute -bottom-8 -left-8 size-48 rounded-full opacity-60 blur-3xl"
|
|
style={{ background: "radial-gradient(circle, white 0%, transparent 70%)" }}
|
|
/>
|
|
{/* 右上光晕 */}
|
|
<div
|
|
className="absolute -right-6 -top-6 size-40 rounded-full opacity-40 blur-2xl"
|
|
style={{ background: "radial-gradient(circle, white 0%, transparent 70%)" }}
|
|
/>
|
|
{/* 中心微光 */}
|
|
<div
|
|
className="absolute inset-x-0 top-1/2 mx-auto size-32 -translate-y-1/2 rounded-full opacity-20 blur-3xl"
|
|
style={{ background: "radial-gradient(circle, white 0%, transparent 70%)" }}
|
|
/>
|
|
|
|
{/* 顶部高光条 */}
|
|
<div className="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-white/50 to-transparent" />
|
|
</>
|
|
);
|
|
}
|