ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: glass instant, content fades in — backdrop and blur separate from animation

Browse Source
This commit is contained in:
Usman Baig
2026-03-26 00:10:40 +01:00
parent 3e603c77a9
commit dc867e84f4
2 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/settings/unified/UnifiedSettingsModal.tsx
View File

@@ -374,7 +374,7 @@ export default function UnifiedSettingsModal() {
return ( return (
<> <>
{/* Backdrop */} {/* Backdrop — fades in/out */}
<div <div
className={`fixed inset-0 z-[60] bg-black/50 transition-opacity duration-200 ${ className={`fixed inset-0 z-[60] bg-black/50 transition-opacity duration-200 ${
isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none' isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
@@ -382,21 +382,19 @@ export default function UnifiedSettingsModal() {
onClick={handleBackdropClick} onClick={handleBackdropClick}
/> />
{/* Modal outer wrapper — fades in/out, glass panel inside stays always-opaque */} {/* Glass panel — always mounted, instant show/hide, blur always composited */}
<div <div
className={`fixed inset-0 z-[61] flex items-center justify-center p-4 transition-all duration-200 ease-out ${ className={`fixed inset-0 z-[61] flex items-center justify-center p-4 ${
isOpen isOpen ? 'visible pointer-events-auto' : 'invisible pointer-events-none'
? 'opacity-100 scale-100 pointer-events-auto'
: 'opacity-0 scale-[0.97] pointer-events-none'
}`} }`}
> >
<div <div
className="w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden" className="w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
> >
{/* All content gated by isOpen — empty glass box when closed (GPU keeps blur warm) */} {/* Content fades in/out independently — glass stays solid */}
{isOpen && ( {isOpen && (
<> <div className="flex flex-col h-full animate-fade-in">
{/* Header */} {/* Header */}
<div className="shrink-0 px-6 pt-5 pb-4 border-b border-white/[0.06]"> <div className="shrink-0 px-6 pt-5 pb-4 border-b border-white/[0.06]">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
@@ -470,7 +468,7 @@ export default function UnifiedSettingsModal() {
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
</> </div>
)} )}
</div> </div>
</div> </div>

9
styles/globals.css
View File

@@ -107,4 +107,13 @@
.animate-float { .animate-float {
animation: float 6s ease-in-out infinite; animation: float 6s ease-in-out infinite;
} }
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-fade-in {
animation: fadeIn 150ms ease-out;
}
} }