etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: rewrite 5 broken background components from Aceternity sources

Browse Source 
- Aurora: remove invert filter (broken on dark bg), use dark gradient directly
- Beams: use animated linearGradient positions instead of pathLength animation
- Beams Collision: add collision detection, explosion particles, AnimatePresence
- Gemini Effect: rewrite as SVG motion.path with animated pathLength (was canvas)
- Noise: change mixBlendMode from overlay to screen (overlay invisible on dark bg)
This commit is contained in:
Fringg
2026-02-25 07:31:16 +03:00
parent 1a702a68b9
commit de97a030d2
5 changed files with 320 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/ui/backgrounds/aurora-background.tsx
View File

@@ -5,32 +5,29 @@ interface Props {
}
export default function AuroraBackground({ settings }: Props) {
const speed = (settings.speed as number) ?? 60;
const showRadialGradient = (settings.showRadialGradient as boolean) ?? true;
return (
<div className="absolute inset-0 overflow-hidden">
<div
className="absolute inset-0 overflow-hidden"
style={
{
'--aurora':
'repeating-linear-gradient(100deg,#3b82f6_10%,#a5b4fc_15%,#93c5fd_20%,#ddd6fe_25%,#60a5fa_30%)',
'--dark-gradient':
'repeating-linear-gradient(100deg,#000_0%,#000_7%,transparent_10%,transparent_12%,#000_16%)',
'--transparent': 'transparent',
} as React.CSSProperties
}
>
<div
className={cn(
`pointer-events-none absolute -inset-[10px] opacity-50 blur-[10px] invert filter will-change-transform after:animate-aurora`,
`[background-image:var(--white-gradient),var(--aurora)] [background-position:50%_50%,50%_50%] [background-size:300%,_200%]`,
`after:absolute after:inset-0 after:mix-blend-difference after:content-[""] after:[background-attachment:fixed] after:[background-image:var(--white-gradient),var(--aurora)] after:[background-size:200%,_100%]`,
`dark:invert-0 dark:[background-image:var(--dark-gradient),var(--aurora)] after:dark:[background-image:var(--dark-gradient),var(--aurora)]`,
`pointer-events-none absolute -inset-[10px] opacity-50 blur-[10px] will-change-transform after:animate-aurora`,
`[background-image:var(--dark-gradient),var(--aurora)] [background-position:50%_50%,50%_50%] [background-size:300%,_200%]`,
`after:absolute after:inset-0 after:mix-blend-difference after:content-[""] after:[background-attachment:fixed] after:[background-image:var(--dark-gradient),var(--aurora)] after:[background-size:200%,_100%]`,
showRadialGradient &&
`[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`,
)}
style={
{
'--aurora':
'repeating-linear-gradient(100deg,var(--blue-500)_10%,var(--indigo-300)_15%,var(--blue-300)_20%,var(--violet-200)_25%,var(--blue-400)_30%)',
'--dark-gradient':
'repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,transparent_10%,transparent_12%,var(--black)_16%)',
'--white-gradient':
'repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,transparent_10%,transparent_12%,var(--white)_16%)',
'--transparent': 'transparent',
animationDuration: `${speed}s`,
} as React.CSSProperties
}
/>
</div>
);