79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
|
|
export default function GlowEffect({ children, id }: { children: React.ReactNode; id?: string }) {
|
|
const [isPropertyRegistered, setIsPropertyRegistered] = useState(false);
|
|
|
|
// Register CSS property in component body (before render)
|
|
if (typeof window !== 'undefined' && 'CSS' in window && 'registerProperty' in CSS) {
|
|
try {
|
|
CSS.registerProperty({
|
|
name: '--form-angle',
|
|
syntax: '<angle>',
|
|
initialValue: '0deg',
|
|
inherits: false,
|
|
});
|
|
} catch (e) {
|
|
// Property may already be registered
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
// Trigger second render to add style tag
|
|
setIsPropertyRegistered(true);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
{isPropertyRegistered && (
|
|
<style>{`
|
|
@keyframes form-glow-rotate {
|
|
to {
|
|
--form-angle: 360deg;
|
|
}
|
|
}
|
|
|
|
.email-form-wrapper {
|
|
background: linear-gradient(#0a0612, #0a0612) padding-box,
|
|
conic-gradient(from var(--form-angle, 0deg),
|
|
rgba(99, 102, 241, 0.5),
|
|
rgba(139, 92, 246, 1),
|
|
rgba(99, 102, 241, 0.5),
|
|
rgba(236, 72, 153, 0.8),
|
|
rgba(99, 102, 241, 0.5),
|
|
rgba(34, 211, 238, 1),
|
|
rgba(99, 102, 241, 0.5)
|
|
) border-box;
|
|
animation: form-glow-rotate 12s linear infinite;
|
|
}
|
|
|
|
.email-form-wrapper::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -3px;
|
|
border-radius: 15px;
|
|
background: conic-gradient(from var(--form-angle, 0deg),
|
|
rgba(99, 102, 241, 0.2),
|
|
rgba(139, 92, 246, 0.7),
|
|
rgba(99, 102, 241, 0.2),
|
|
rgba(236, 72, 153, 0.5),
|
|
rgba(99, 102, 241, 0.2),
|
|
rgba(34, 211, 238, 0.7),
|
|
rgba(99, 102, 241, 0.2)
|
|
);
|
|
filter: blur(18px);
|
|
opacity: 0.75;
|
|
z-index: -1;
|
|
animation: form-glow-rotate 12s linear infinite;
|
|
}
|
|
`}</style>
|
|
)}
|
|
|
|
<div id={id} className="flex items-center justify-center p-4 scroll-mt-50">
|
|
<div className="email-form-wrapper relative isolate max-w-lg w-full mx-auto p-[2px] rounded-xl">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|